2020-5-24 前端達人
應對現(xiàn)在數(shù)據(jù)可視化的趨勢，越來越多企業(yè)需要在很多場景(營銷數(shù)據(jù)，生產(chǎn)數(shù)據(jù)，用戶數(shù)據(jù))下使用，可視化圖表來展示體現(xiàn)數(shù)據(jù)，讓數(shù)據(jù)更加直觀，數(shù)據(jù)特點更加突出。
常見的數(shù)據(jù)可視化庫：
D3.js 目前 Web 端評價最高的 Javascript 可視化工具庫(入手難)
ECharts.js 百度出品的一個開源 Javascript 數(shù)據(jù)可視化庫
Highcharts.js 國外的前端數(shù)據(jù)可視化庫，非商用免費，被許多國外大公司所使用
AntV 螞蟻金服全新一代數(shù)據(jù)可視化解決方案 等等
Highcharts 和 Echarts 就像是 Office 和 WPS 的關系
ECharts，一個使用 JavaScript 實現(xiàn)的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數(shù)據(jù)可視化圖表。
官網(wǎng)地址：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.指定配置項和數(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.將配置項設置給echarts實例對象
這是要求同學們知道以下配置每個模塊的主要作用干什么的就可以了
series
系列列表。每個系列通過 type 決定自己的圖表類型
大白話：圖標數(shù)據(jù)，指定什么類型的圖標，可以多個圖表重疊。
xAxis：直角坐標系 grid 中的 x 軸
boundaryGap: 坐標軸兩邊留白策略 true，這時候刻度只是作為分隔線，標簽和數(shù)據(jù)點都會在兩個刻度之間的帶(band)中間。
yAxis：直角坐標系 grid 中的 y 軸
grid：直角坐標系內(nèi)繪圖網(wǎng)格。
title：標題組件
tooltip：提示框組件
legend：圖例組件
color：調(diào)色盤顏色列表
數(shù)據(jù)堆疊，同個類目軸上系列配置相同的stack值后 后一個系列的值會在前一個系列的值上相加。
option = {
// color設置我們線條的顏色 注意后面是個數(shù)組
color: ['pink', 'red', 'green', 'skyblue'],
// 設置圖表的標題
title: {
text: '折線圖堆疊123'
},
// 圖表的提示框組件
tooltip: {
// 觸發(fā)方式
trigger: 'axis'
},
// 圖例組件
legend: {
// series里面有了 name值則 legend里面的data可以刪掉
},
// 網(wǎng)格配置 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: '聯(lián)盟廣告',
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.官網(wǎng)實例
官網(wǎng)默認為我們提供了大量的案例，我們需要使用那一種只需要直接點擊打開后復制他們的相關配置，然后按照我上面說的5大步驟進行使用即可。
2.社區(qū)Gallery
官方自帶的圖例，可能在很多時候并不能滿足我們的需要，在社區(qū)這里可以找到一些基于echart的高度定制好的圖表，相當于基于jquery開發(fā)的插件，這里是基于echarts開發(fā)的第三方的圖表。
本案例中使用了地圖模擬飛行的案例就是從社區(qū)中進行引用的，
參考社區(qū)的例子：https://gallery.echartsjs.com/editor.html?c=x0-ExSkZDM (模擬飛機航線)
實現(xiàn)步驟：
第一需要下載china.js提供中國地圖的js文件
第二個因為里面代碼比較多，我們新建一個新的js文件 myMap.js 引入
使用社區(qū)提供的配置即可。
代碼已經(jīng)上傳至我的碼云如有需要的小伙伴可自行下載：
https://gitee.com/jiuyueqi/echarts
ps:最后呢，如果大家看完樓主的文章覺得對echarts的學習和了解有所幫助，麻煩大家路過點個贊點個關注唄!樓主后續(xù)還會繼續(xù)更新有關前端方面的面試題資料或者其他方面的知識。
————————————————
版權聲明：本文為CSDN博主「程序猿玖月柒」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_45257157/java/article/details/106300587