2020-5-24 前端達(dá)人
應(yīng)對(duì)現(xiàn)在數(shù)據(jù)可視化的趨勢(shì)，越來(lái)越多企業(yè)需要在很多場(chǎng)景(營(yíng)銷數(shù)據(jù)，生產(chǎn)數(shù)據(jù)，用戶數(shù)據(jù))下使用，可視化圖表來(lái)展示體現(xiàn)數(shù)據(jù)，讓數(shù)據(jù)更加直觀，數(shù)據(jù)特點(diǎn)更加突出。
常見(jiàn)的數(shù)據(jù)可視化庫(kù)：
D3.js 目前 Web 端評(píng)價(jià)最高的 Javascript 可視化工具庫(kù)(入手難)
ECharts.js 百度出品的一個(gè)開(kāi)源 Javascript 數(shù)據(jù)可視化庫(kù)
Highcharts.js 國(guó)外的前端數(shù)據(jù)可視化庫(kù)，非商用免費(fèi)，被許多國(guó)外大公司所使用
AntV 螞蟻金服全新一代數(shù)據(jù)可視化解決方案 等等
Highcharts 和 Echarts 就像是 Office 和 WPS 的關(guān)系
ECharts，一個(gè)使用 JavaScript 實(shí)現(xiàn)的開(kāi)源可視化庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫(kù) ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。
官網(wǎng)地址：https://www.echartsjs.com/zh/index.html
echarts體驗(yàn)
下載echarts https://github.com/apache/incubator-echarts/tree/4.5.0
使用步驟（5大步驟）：
1.引入echarts 插件文件到html頁(yè)面中
2.準(zhǔn)備一個(gè)具備大小的DOM容器
<div id="main" style="width: 600px;height:400px;"></div>
3.初始化echarts實(shí)例對(duì)象
var myChart = echarts.init(document.getElementById('main'));
4.指定配置項(xiàng)和數(shù)據(jù)(option)
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
5.將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象
這是要求同學(xué)們知道以下配置每個(gè)模塊的主要作用干什么的就可以了
series
系列列表。每個(gè)系列通過(guò) type 決定自己的圖表類型
大白話：圖標(biāo)數(shù)據(jù)，指定什么類型的圖標(biāo)，可以多個(gè)圖表重疊。
xAxis：直角坐標(biāo)系 grid 中的 x 軸
boundaryGap: 坐標(biāo)軸兩邊留白策略 true，這時(shí)候刻度只是作為分隔線，標(biāo)簽和數(shù)據(jù)點(diǎn)都會(huì)在兩個(gè)刻度之間的帶(band)中間。
yAxis：直角坐標(biāo)系 grid 中的 y 軸
grid：直角坐標(biāo)系內(nèi)繪圖網(wǎng)格。
title：標(biāo)題組件
tooltip：提示框組件
legend：圖例組件
color：調(diào)色盤顏色列表
數(shù)據(jù)堆疊，同個(gè)類目軸上系列配置相同的stack值后 后一個(gè)系列的值會(huì)在前一個(gè)系列的值上相加。
option = {
// color設(shè)置我們線條的顏色 注意后面是個(gè)數(shù)組
color: ['pink', 'red', 'green', 'skyblue'],
// 設(shè)置圖表的標(biāo)題
title: {
text: '折線圖堆疊123'
},
// 圖表的提示框組件
tooltip: {
// 觸發(fā)方式
trigger: 'axis'
},
// 圖例組件
legend: {
// series里面有了 name值則 legend里面的data可以刪掉
},
// 網(wǎng)格配置 grid可以控制線形圖 柱狀圖 圖表大小
grid: {
left: '3%',
right: '4%',
bottom: '3%',
// 是否顯示刻度標(biāo)簽 如果是true 就顯示 否則反之
containLabel: true
},
// 工具箱組件 可以另存為圖片等功能
toolbox: {
feature: {
saveAsImage: {}
}
},
// 設(shè)置x軸的相關(guān)配置
xAxis: {
type: 'category',
// 是否讓我們的線條和坐標(biāo)軸有縫隙
boundaryGap: false,
data: ['星期一', '周二', '周三', '周四', '周五', '周六', '周日']
},
// 設(shè)置y軸的相關(guān)配置
yAxis: {
type: 'value'
},
// 系列圖表配置 它決定著顯示那種類型的圖表
series: [
{
name: '郵件營(yíng)銷',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '聯(lián)盟廣告',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '視頻廣告',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接訪問(wèn)',
type: 'line',
data: [320, 332, 301, 334, 390, 330, 320]
}
]
};
1.官網(wǎng)實(shí)例
官網(wǎng)默認(rèn)為我們提供了大量的案例，我們需要使用那一種只需要直接點(diǎn)擊打開(kāi)后復(fù)制他們的相關(guān)配置，然后按照我上面說(shuō)的5大步驟進(jìn)行使用即可。
2.社區(qū)Gallery
官方自帶的圖例，可能在很多時(shí)候并不能滿足我們的需要，在社區(qū)這里可以找到一些基于echart的高度定制好的圖表，相當(dāng)于基于jquery開(kāi)發(fā)的插件，這里是基于echarts開(kāi)發(fā)的第三方的圖表。
本案例中使用了地圖模擬飛行的案例就是從社區(qū)中進(jìn)行引用的，
參考社區(qū)的例子：https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (模擬飛機(jī)航線)
實(shí)現(xiàn)步驟：
第一需要下載china.js提供中國(guó)地圖的js文件
第二個(gè)因?yàn)槔锩娲a比較多，我們新建一個(gè)新的js文件 myMap.js 引入
使用社區(qū)提供的配置即可。
代碼已經(jīng)上傳至我的碼云如有需要的小伙伴可自行下載：
https://gitee.com/jiuyueqi/echarts
ps:最后呢，如果大家看完樓主的文章覺(jué)得對(duì)echarts的學(xué)習(xí)和了解有所幫助，麻煩大家路過(guò)點(diǎn)個(gè)贊點(diǎn)個(gè)關(guān)注唄!樓主后續(xù)還會(huì)繼續(xù)更新有關(guān)前端方面的面試題資料或者其他方面的知識(shí)。
————————————————
版權(quán)聲明：本文為CSDN博主「程序猿玖月柒」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_45257157/java/article/details/106300587
藍(lán)藍(lán)設(shè)計(jì)的小編 http://91whvog3.cn