資訊專欄INFORMATION COLUMN
ECharts，EnterpriseCharts的縮寫，商業(yè)級(jí)數(shù)據(jù)圖表，一個(gè)純Javascript的圖表庫(kù)，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級(jí)的Canvas類庫(kù)ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。其創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗(yàn)，賦予了用戶對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。
ECharts組件支持折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點(diǎn)圖（氣泡圖）、K線圖、餅圖（環(huán)形圖）、雷達(dá)圖（填充雷達(dá)圖）、和弦圖、力導(dǎo)向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時(shí)提供標(biāo)題、詳情、氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時(shí)間軸、工具箱等8個(gè)可交互組件，支持多圖表、組件的聯(lián)動(dòng)和混搭展示。
1、首先引入JS
首先給定一下全局樣式、給個(gè)地圖容器
2、獲取容器DOM，設(shè)置地圖相關(guān)參數(shù)
var myChart= echarts.init(document.getElementById(main));
myChart.setOption(option);
詳細(xì)配置，定制樣式，給自定義事件
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：定制信息提示框的內(nèi)容，其中params參數(shù)表示數(shù)據(jù)。
visualMap：圖注樣式定制，其中包括color范圍，文字提示。
geo:定義地圖為china。
zoom:視角縮放比例，roam：是否開啟縮放和平移
itemStyle：地圖外觀定制，其中normal表示正常顯示的樣式，emphasis表示鼠標(biāo)懸浮下樣式。
series：整體配置，其type很關(guān)鍵，表示該例是地圖。
data:圖表所用數(shù)據(jù)，實(shí)際項(xiàng)目中大家可以通過http獲取數(shù)據(jù)，再賦值給data。
Echarts圖表可為現(xiàn)場(chǎng)運(yùn)維人員提供可視化面板監(jiān)控工具，直觀展現(xiàn)被監(jiān)控的主機(jī)、業(yè)務(wù)、數(shù)據(jù)庫(kù)性能、也可以用于故障定位、故障分析等場(chǎng)景。
目前湖南/湖北移動(dòng)日志管理平臺(tái)報(bào)表管理中心，現(xiàn)場(chǎng)運(yùn)維人員正是通過echarts組件靈活配置實(shí)現(xiàn)數(shù)據(jù)庫(kù)性能監(jiān)控、故障定位等運(yùn)維場(chǎng)景。
停開機(jī)工單統(tǒng)計(jì)報(bào)表：
服務(wù)器監(jiān)控圖表：
對(duì)于運(yùn)維來(lái)說，不同的數(shù)據(jù)需要不同的展現(xiàn)形式，要能通過靈活的配置來(lái)提供不同的數(shù)據(jù)展現(xiàn)，常規(guī)的柱狀圖、曲線圖、餅圖、雷達(dá)圖、面積圖都是運(yùn)維數(shù)據(jù)展現(xiàn)所應(yīng)具備的，
以上是echarts的基礎(chǔ)配置引入和使用規(guī)范，及結(jié)合項(xiàng)目實(shí)際場(chǎng)景使用介紹，希望對(duì)大家能有一點(diǎn)啟發(fā)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/130076.html
摘要：發(fā)布是由團(tuán)隊(duì)開源的，操作接口庫(kù)，已成為事實(shí)上的瀏覽器操作標(biāo)準(zhǔn)。本周正式發(fā)布，為我們帶來(lái)了，，支持自定義頭部與腳部，支持增強(qiáng)，兼容原生協(xié)議等特性變化。新特性介紹日前發(fā)布了大版本更新，引入了一系列的新特性與提升，本文即是對(duì)這些變化進(jìn)行深入解讀。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清單專注前端...
摘要：我們?cè)賮?lái)看一下調(diào)用棧，如下圖從圖中我們發(fā)現(xiàn)了一個(gè)調(diào)用棧的代碼執(zhí)行過，還記得里提到嗎發(fā)起臟檢查的通知者，它代理了原生事件，任何一個(gè)原生異步事件的觸發(fā)都會(huì)導(dǎo)致的運(yùn)行。 尋找真兇Echarts or Angular 這是一篇故事，就如同技術(shù)，我們所追求的不是一個(gè)結(jié)局，而是那些深受啟發(fā)與共鳴的過程，那是我們成長(zhǎng)的經(jīng)驗(yàn)與生產(chǎn)力的積淀！ 故事開始于瘋了的ionic3應(yīng)用 頁(yè)面打開，什么也沒做5s里...
摘要：小程序?qū)崿F(xiàn)頁(yè)面轉(zhuǎn)化圖片并保存到相冊(cè)場(chǎng)景小程序測(cè)試活動(dòng)，實(shí)現(xiàn)雷達(dá)圖展示不同的結(jié)果微信頭像二維碼測(cè)試結(jié)果文字，最終繪制出一張圖片用戶保存相冊(cè)。圓形頭像建議切鏤空?qǐng)D覆蓋，，有很難實(shí)現(xiàn)效果建議查看微信小程序社區(qū)的帖子。 小程序echarts+canvasdrawer實(shí)現(xiàn)頁(yè)面轉(zhuǎn)化圖片并保存到相冊(cè) 場(chǎng)景：小程序測(cè)試活動(dòng)，實(shí)現(xiàn)echarts雷達(dá)圖展示不同的結(jié)果、微信頭像、二維碼、測(cè)試結(jié)果文字，最終繪...
摘要：或許，它還終將改變用戶對(duì)移動(dòng)的期待。通過一個(gè)場(chǎng)景實(shí)例了解前端處理大數(shù)據(jù)的無(wú)限可能隨著前端的飛速發(fā)展，在瀏覽器端完成復(fù)雜的計(jì)算，支配并處理大量數(shù)據(jù)已經(jīng)屢見不鮮。 推薦 1. 神經(jīng)網(wǎng)絡(luò)入門 http://www.ruanyifeng.com/blo... 眼下最熱門的技術(shù)，絕對(duì)是人工智能，人工智能的底層模型是神經(jīng)網(wǎng)絡(luò)（neural network）。許多復(fù)雜的應(yīng)用（比如模式識(shí)別、自動(dòng)控制）...
閱讀 1356·2023-01-11 13:20
閱讀 1707·2023-01-11 13:20
閱讀 1215·2023-01-11 13:20
閱讀 1906·2023-01-11 13:20
閱讀 4165·2023-01-11 13:20
閱讀 2757·2023-01-11 13:20
閱讀 1402·2023-01-11 13:20
閱讀 3671·2023-01-11 13:20
