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