資訊專欄INFORMATION COLUMN
ECharts，EnterpriseCharts的縮寫，商業級數據圖表，一個純Javascript的圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數據可視化圖表。其創新的拖拽重計算、數據視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數據進行挖掘、整合的能力。
ECharts組件支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題、詳情、氣泡、圖例、值域、數據區域、時間軸、工具箱等8個可交互組件，支持多圖表、組件的聯動和混搭展示。
1. 首先引入JS
"dist/echarts.js">script>
"map/js/china.js">script> 首先給定一下全局樣式、給個地圖容器：
<style>
*{margin:0;padding:0}
html,body{
width:100%;
height:100%;
}
#main{
width:800px;
height:600px;
margin:150px auto;
border:1pxsolid #ffffd;
}
/*建議長寬比0.75，符合審美*/
style>
<div id="main">
div>2. 獲取容器DOM，設置地圖相關參數
var myChart= echarts.init(document.getElementById(main));
myChart.setOption(option);詳細配置，定制樣式，給自定義事件。
option= {
tooltip:{
formatter:function(params,ticket,callback){
return params.seriesName+
+params.name+：+params.value
}
},
visualMap:{
min:0,
max:1500,
left:left,
top:bottom,
text:[高,低],
inRange:{
color:[#e0ffff, #006edd]
},
show:true
},
geo:{
map:china,
roam:false,
zoom:1.23,
label:{
normal:{
show:true,
fontSize:10,
color:rgba(0,0,0,0.7)
}
},
itemStyle:{
normal:{
borderColor:rgba(0, 0, 0, 0.2)
},
emphasis:{
areaColor:#F3B329,
shadowOffsetX:0,
shadowOffsetY:0,
shadowBlur:20,
borderWidth:0,
shadowColor:rgba(0, 0, 0, 0.5)
}
}
},
series: [
{
name:信息量,
type:map,
geoIndex:0,
data:dataList
}
]
};tooltip：定制信息提示框的內容，其中params參數表示數據。
visualMap：圖注樣式定制，其中包括color范圍，文字提示。
geo:定義地圖為china。
zoom:視角縮放比例，roam：是否開啟縮放和平移。
itemStyle：地圖外觀定制，其中normal表示正常顯示的樣式，emphasis表示鼠標懸浮下樣式。
series：整體配置，其type很關鍵，表示該例是地圖。
Echarts圖表可為現場運維人員提供可視化面板監控工具，直觀展現被監控的主機、業務、數據庫性能、也可以用于故障定位、故障分析等場景。
目前湖南/湖北移動日志管理平臺報表管理中心，現場運維人員正是通過echarts組件靈活配置實現數據庫性能監控、故障定位等運維場景。
停開機工單統計報表：
服務器監控圖表：
總 結：
對于運維來說，不同的數據需要不同的展現形式，要能通過靈活的配置來提供不同的數據展現，常規的柱狀圖、曲線圖、餅圖、雷達圖、面積圖都是運維數據展現所應具備的，
以上是echarts的基礎配置引入和使用規范，及結合項目實際場景使用介紹，希望對大家能有一點啟發。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/129272.html
摘要：發布是由團隊開源的，操作接口庫，已成為事實上的瀏覽器操作標準。本周正式發布，為我們帶來了，，支持自定義頭部與腳部，支持增強，兼容原生協議等特性變化。新特性介紹日前發布了大版本更新，引入了一系列的新特性與提升，本文即是對這些變化進行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...
摘要：我們再來看一下調用棧，如下圖從圖中我們發現了一個調用棧的代碼執行過，還記得里提到嗎發起臟檢查的通知者，它代理了原生事件，任何一個原生異步事件的觸發都會導致的運行。 尋找真兇Echarts or Angular 這是一篇故事，就如同技術，我們所追求的不是一個結局，而是那些深受啟發與共鳴的過程，那是我們成長的經驗與生產力的積淀！ 故事開始于瘋了的ionic3應用 頁面打開，什么也沒做5s里...
摘要：小程序實現頁面轉化圖片并保存到相冊場景小程序測試活動，實現雷達圖展示不同的結果微信頭像二維碼測試結果文字，最終繪制出一張圖片用戶保存相冊。圓形頭像建議切鏤空圖覆蓋，，有很難實現效果建議查看微信小程序社區的帖子。 小程序echarts+canvasdrawer實現頁面轉化圖片并保存到相冊 場景：小程序測試活動，實現echarts雷達圖展示不同的結果、微信頭像、二維碼、測試結果文字，最終繪...
摘要：或許，它還終將改變用戶對移動的期待。通過一個場景實例了解前端處理大數據的無限可能隨著前端的飛速發展，在瀏覽器端完成復雜的計算，支配并處理大量數據已經屢見不鮮。 推薦 1. 神經網絡入門 http://www.ruanyifeng.com/blo... 眼下最熱門的技術，絕對是人工智能，人工智能的底層模型是神經網絡（neural network）。許多復雜的應用（比如模式識別、自動控制）...
閱讀 1347·2023-01-11 13:20
閱讀 1686·2023-01-11 13:20
閱讀 1133·2023-01-11 13:20
閱讀 1860·2023-01-11 13:20
閱讀 4104·2023-01-11 13:20
閱讀 2705·2023-01-11 13:20
閱讀 1386·2023-01-11 13:20
閱讀 3599·2023-01-11 13:20
