作者丨夙言

來(lái)源丨前端大牛愛(ài)好者(Web-2017)

https://segmentfault.com/a/1190000018993981

本文章篇幅略長(zhǎng)，內(nèi)容有點(diǎn)多，大佬可根據(jù)目錄選擇性查閱，新人可一步步來(lái)閱讀。

1、 前言

1.1 業(yè)務(wù)場(chǎng)景

突然接到產(chǎn)品說(shuō)要做一個(gè)數(shù)據(jù)監(jiān)控的系統(tǒng)。有線圖、柱狀圖、地圖，類(lèi)似于數(shù)據(jù)可視化的方式。本人之前從未接觸過(guò)Echarts，然后需要2周拿出成果，有點(diǎn)慌😂😂

1.2 業(yè)務(wù)分析

拿到需求看了一下。支持用戶名、密碼登錄，默認(rèn)顯示一個(gè)維度數(shù)據(jù)，然后點(diǎn)擊可鉆取進(jìn)入第二維度數(shù)據(jù)，再點(diǎn)擊進(jìn)入第三維度數(shù)據(jù)展示。大致估摸著。。。

系統(tǒng)搭建vue-cli

vuex記錄登錄信息

vue-router路由跳轉(zhuǎn)

3個(gè)維度的頁(yè)面，提取出共用的組件

各個(gè)組件開(kāi)發(fā)

調(diào)節(jié)樣式，增加UI

加入后臺(tái)接口數(shù)據(jù)

優(yōu)化顯示

測(cè)試

上線

當(dāng)然這不是要2周內(nèi)，全做完。應(yīng)該是完成步驟6。相對(duì)于公司就我一個(gè)前端，沒(méi)接觸過(guò)Echarts，有問(wèn)題都沒(méi)人討論的情況下。。。心里還是忍不住想吐槽一下😒😒😒

1.3 效果展示

這里列出了第一維度頁(yè)面的樣式。文字請(qǐng)無(wú)視，哈哈。

2 、系統(tǒng)安裝

吐槽歸吐槽，活還是要干的。😎因?yàn)楸救俗钍煜さ倪€是vue，所以還是選擇了用vue全家桶來(lái)做。這部分可參考?vue build

2.1 安裝node環(huán)境

• 下載安裝node環(huán)境，直接去官網(wǎng)下載即可?node.js

安裝完后可在命令行運(yùn)行node -vnpm -v查看是否安裝成功以及版本

2.2 安裝Vue項(xiàng)目

2.2.1 安裝vue

官方文檔：vuejs這里我們使用npm的方式

• npm i vue

2.2.2 安裝Vue CLI

官方文檔：vue CLI

• npm i -g @vue/cli

安裝之后，你就可以在命令行中訪問(wèn) vue 命令。你可以用這個(gè)命令來(lái)查看其版本。vue -V

2.2.3 創(chuàng)建項(xiàng)目

這里安裝的時(shí)候，注意將我們要使用的安裝上。vuex、vue-router，其他可根據(jù)需要添加。

方法一

• vue create hello-world

這里參照官方網(wǎng)站，有很詳細(xì)的介紹。參照：vue create

方法二

使用圖形化界面

• vue ui

界面含中文，很好操作。參照：vue ui

2.2.4 安裝插件

方法一

最直接也是推薦的?npm i xxx這里介紹一下?-S -D -g的區(qū)別

• npm i -S xxx 文件寫(xiě)入dependencies，用于工程中開(kāi)發(fā)時(shí)使用到的插件，會(huì)發(fā)布到生產(chǎn)環(huán)境如UI，JS等。
• npm i -D xxx 文件寫(xiě)入devDependencies，用于工程支持類(lèi)插件，不會(huì)發(fā)布到生產(chǎn)環(huán)境，如gulp等壓縮打包工具。
• npm i -g xxx 全局安裝，如vue、ncu等。安裝目錄為：C:Users用戶AppDataRoamingnpm

方法二

vue ui圖像化界面中包含了若干插件，可點(diǎn)擊安裝，但不一定是最新版本。同時(shí)會(huì)在hello中引入。其他和方法一沒(méi)區(qū)別。

2.3 安裝Echarts

這里我們?yōu)榱朔奖?#xff0c;使用了npm全量引用，后期為了精簡(jiǎn)項(xiàng)目可單個(gè)引用。

• npm i echarts -S

然后在main.js中添加這里建議提前自定義echarts的樣式，并引入到項(xiàng)目中。官方自定義地址：theme-builder在頁(yè)面中我們可以如下引用：var myChart = this.$echarts.init(document.getElementById("myid"),'temp')myid是我們要展示的echarts的id。temp是我們的自定義的樣式，同時(shí)官方提供了幾個(gè)樣式例子，可以node_modules\echarts\theme中找到。

2.4 安裝element-ui

這里我們?yōu)榱朔奖?#xff0c;使用了npm全量引用，后期為了精簡(jiǎn)項(xiàng)目可單個(gè)引用。

• npm i element-ui -S

然后在main.js中添加

2.5 安裝百度地圖

一般vue使用百度地圖有2種方式，

• 一種是像官網(wǎng)那樣去應(yīng)用。如：BMap
• 第二種是使用?vue-baidu-map

不管是哪一種都要去申請(qǐng)賬號(hào)和密鑰。申請(qǐng)地址為：百度地圖密鑰(ak)這里我使用了第二種。vue-baidu-map文檔

• npm i vue-baidu-map -S

然后在main.js中添加。xxxxxxxx這里填寫(xiě)自己申請(qǐng)的密鑰。在頁(yè)面中，參照文檔，可使用標(biāo)簽來(lái)調(diào)用。

2.6 初始化樣式

css樣式初始化，簡(jiǎn)單來(lái)說(shuō)就是為了各個(gè)瀏覽器能統(tǒng)一什么的。這里我使用的是?normalize.css下載下來(lái)后，在main.js中添加基本上的準(zhǔn)備工作都做好了，接下來(lái)就是具體的代碼了。

3 、項(xiàng)目搭建

3.1 router、vuex

我這里新建了一個(gè)router.js、store.js，大致如下：哦哈，這里路由定義是為了方便看哈，具體還是根據(jù)業(yè)務(wù)來(lái)定義。這里的router.beforeEach路由衛(wèi)士用于是否登錄校驗(yàn)。然后我們?cè)趍ain.js中來(lái)引用。更多請(qǐng)參考官方文檔：Vue Router Vuex

3.2 Login頁(yè)面

登錄頁(yè)面沒(méi)啥，就是個(gè)form提交，由于路由中判斷user.id。所以我們儲(chǔ)存一下，然后跳轉(zhuǎn)到Index頁(yè)面就行。這里只是一種方式，也可以使用Cookie和Session

3.3 Index頁(yè)面

分析頁(yè)面分成了2個(gè)大部分

• 第一部分是?頭部
• 第二部門(mén)是?主體

我們將頭部當(dāng)做一個(gè)組件進(jìn)行復(fù)用。組件的復(fù)用可參考官方文檔：https://cn.vuejs.org/v2/guide...

3.4 header頁(yè)面

頭部比較簡(jiǎn)單，除了一些顯示外，還有一個(gè)顯示當(dāng)前時(shí)間。這里我們使用了setInterval，每隔1秒去獲取一下當(dāng)前時(shí)間賦值給你定義的v-model就行。同時(shí)在離開(kāi)頁(yè)面時(shí)，我們清理掉定時(shí)器。這里需要我們對(duì)Vue的生命周期有一定的了解。獲取當(dāng)前時(shí)間的方法可參考：data-module.js

3.5 主體頁(yè)面

這里分析一下頁(yè)面，主要分成了3塊。

左邊，包含了2個(gè)折線圖。

中間，包含了數(shù)字和地圖。

右邊，包含了柱狀圖和表格。

接下來(lái)主要介紹一下，自己這2周摸索出來(lái)的一些Echarts配置，適合新手，大佬輕噴。這里需要經(jīng)常翻閱?Echarts配置項(xiàng)?和?API?了

3.5.1 Echarts基本

這里列出基本的渲染寫(xiě)法，具體的圖形和數(shù)據(jù)只要修改option就可以了。 export default { mounted(){ this.drawECharts() }, methods:{ drawECharts(){ // temp 是我們的自定義樣式，上面安裝Echarts時(shí)有介紹 var myChart = this.$echarts.init(document.getElementById("myecharts"),'temp') var option = {} option = { // 吧啦吧啦 一堆配置 } // 執(zhí)行渲染圖形和數(shù)據(jù)的操作 if (option && typeof option === "object") { myChart.setOption(option, true) } } } } // 一定要設(shè)置大小，不然不出來(lái)，這玩意和canvas一樣 .myecharts{ width : 500px; height : 300px; }3.5.2 線形圖多多實(shí)踐，就會(huì)發(fā)現(xiàn)每個(gè)配置和其參數(shù)的作用了。option = { // 提示框(就是鼠標(biāo)放上去后出現(xiàn)的框) tooltip : { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, // 右上角的組件，用于說(shuō)明，也可進(jìn)行點(diǎn)擊篩選 legend: { align : 'right', x : 'right', top : 25, selectedMode : 'single', // 我這里設(shè)置的單選模式 data:['好','壞'] // 顯示的第一項(xiàng)和第二項(xiàng)，這里的顏色是根據(jù)自定義主題的顏色順序來(lái)定的 }, // x、y軸顯示一些設(shè)置，比如刻度顏色顯示什么的，可在自定義主題設(shè)置一部分 xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, // 具體配置項(xiàng)，根據(jù)具體項(xiàng)目查看官網(wǎng)配置項(xiàng)說(shuō)明 series: [ { name : '好', data: [150, 132, 201, 534, 290, 530, 820], type: 'line', smooth: true, // 是否平滑曲線 areaStyle: {}, }, { name : '壞', data: [82, 93, 90, 93, 129, 333, 432], type: 'line', smooth: true, areaStyle: {}, } ]}// 查看Echarts的API，我們需要顯示默認(rèn)的一些數(shù)據(jù)，配置如下// 默認(rèn)顯示壞的數(shù)據(jù)myChart.dispatchAction({ type: 'legendSelect', name: '壞',})// 默認(rèn)顯示第7個(gè)數(shù)據(jù)myChart.dispatchAction({ type: 'showTip', seriesIndex: 1, dataIndex: 6,})預(yù)覽：

3.5.3 柱狀圖

這里我們直接用雙柱狀圖來(lái)演示。因?yàn)槊趾蛿?shù)字需要提示和點(diǎn)擊的功能，所以沒(méi)有使用echarts的y軸。不然formatter又要寫(xiě)一堆，雖然用了自定義的，但最開(kāi)始是用的formatter。可以實(shí)現(xiàn)相同展示，但無(wú)法操作，如鼠標(biāo)提示和鼠標(biāo)點(diǎn)擊。 名稱(chēng)：{{it.name}}
個(gè)數(shù)：{{it.num}} {{ it.name.substring(0,4)+'...' }} {{ it.num }} 名稱(chēng)：{{it.name}}
個(gè)數(shù)：{{it.num}} {{ it.name.substring(0,4)+'...' }} {{ it.num }} css這里就不貼了，效果就是這2行文字剛好貼在2行柱狀圖前面。接下來(lái)是echarts配置。option = { // 鼠標(biāo)提示框 tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, // 右邊顯示 legend: { selectedMode:false, data: ['好', '壞'], top:5, right:8, }, // 兩個(gè)圖坐標(biāo)的位置 grid: [ {left: '16%', top:'10%', width: '22%', height: '86%'}, {left: '65%', top:'10%', width: '22%', height: '86%'} ], // 兩個(gè)圖x軸的設(shè)置，這里的gridIndex就是個(gè)序號(hào)，用于區(qū)分 xAxis: [ {gridIndex : 0, show : false}, {gridIndex : 1, show : false}, ], // 兩個(gè)圖y軸的設(shè)置，注釋的部分是用echarts本身的y軸來(lái)顯示名稱(chēng)和數(shù)量的 yAxis: [ { gridIndex: 0, type: 'category', show : false, data : ['廣東/12','杭州/13','北京北京/14','天津/16'], // axisLabel: { // formatter : function(value){ // let arr = value.split('/') // return '{a|'+arr[0]+'}\n{b|'+ arr[1]+'}'; // }, // rich: { // a: { // color : '#ffffff', // lineHeight : 19, // fontSize : 14, // align: 'right', // }, // b:{ // fontSize : 18, // lineHeight : 19, // fontWeight : 'bold', // align: 'right', // fontFamily : 'Digital', // } // } // } }, { gridIndex: 1, show : false, type: 'category', data : ['海南/12','三亞/13','哈爾濱/14','西雙版納/16'], // axisLabel: { // formatter : function(value){ // let arr = value.split('/') // return '{a|'+arr[0]+'}\n{b|'+ arr[1]+'}'; // }, // rich: { // a: { // color : '#ffffff', // lineHeight : 19, // fontSize : 14, // align: 'right', // }, // b:{ // fontSize : 18, // lineHeight : 19, // fontWeight : 'bold', // align: 'right', // fontFamily : 'Digital', // } // } // } }, ], // 渲染圖形和數(shù)據(jù)，bar是柱狀圖 // barWidth 柱狀的寬度 // 兩類(lèi)兩套，所以有4組數(shù)據(jù)，使用xAxisIndex、yAxisIndex來(lái)區(qū)分。 series: [ { name: '好', type: 'bar', barWidth : 5, barMinHeight : 5, barGap : '100%', xAxisIndex: 0, yAxisIndex: 0, data: [0, 3489, 9022234, 922228], label: { normal: { position: 'right', show: true } }, }, { name: '壞', type: 'bar', barWidth : 5, barMinHeight : 5, xAxisIndex: 0, yAxisIndex: 0, data: [0, 2438, 3300, 1594], label: { normal: { position: 'right', show: true } }, }, { name: '好', type: 'bar', barWidth : 5, barMinHeight : 10, barGap : '100%', xAxisIndex: 1, yAxisIndex: 1, data: [8203, 3489, 9034, 222], label: { normal: { position: 'right', show: true } }, }, { name: '壞', type: 'bar', barWidth : 5, barMinHeight : 5, xAxisIndex: 1, yAxisIndex: 1, data: [445, 2438, 3300, 555], label: { normal: { position: 'right', show: true } }, }, ]}預(yù)覽：

3.5.4 表格

table我這里使用了element-ui加上修改 UI 默認(rèn)css?和 滾動(dòng)條的?css。這里列出一項(xiàng)，其他寫(xiě)法相似。 :data="tableData" style="min-width: 100%;"> prop="date" min- header-align="center" label="時(shí)間"> {{scope.row.date}} {{ scope.row.date }} UI 樣式UI?css的修改，這里我使用了自定義字體哦，完全copy是不起作用的。其他的設(shè)置項(xiàng)不做說(shuō)明，F12打開(kāi)，隨便玩。.el-table thead { color: #FFFFFF;}.el-table { color: #00A5F6; font-family: 'Regular'; background-color: rgba(0, 0, 0, 0.03); th { padding: 2px 0; background-color: #003260; } th.is-leaf { border-bottom: 0px solid #EBEEF5; } tr { background-color: rgba(0, 0, 0, 0.03); } td { border-bottom: 1px solid #2c3547; padding: 2px 0; } .el-table::before { height: 0px; z-index: 0; background-color: #2c3547; }}滾動(dòng)條的樣式隨意改變看看效果就懂了，谷歌瀏覽器 😅/* scrollbar */::-webkit-scrollbar { width: 8px; height: 1px; background-color:transparent;}::-webkit-scrollbar-thumb { border-radius: 10px; background: #adabab;}::-webkit-scrollbar-track { border-radius: 10px; background:#394d63;}預(yù)覽：

3.5.5 百度地圖

vue-baidu-map?文檔 :center="map.center" // 地圖中心經(jīng)緯 {lng: 114.023598, lat: 33.589299} :scroll-wheel-zoom="true" // 地圖是否滾輪縮放 :zoom="map.zoom" // 默認(rèn)地圖尺寸 :mapStyle="mapStyle" // 地圖樣式 > // 地圖寬高 // 標(biāo)點(diǎn) :key="it.id" :position="it.position" // 標(biāo)點(diǎn)位置 @click="markclick(it,index)" // 標(biāo)點(diǎn)點(diǎn)擊事件 @mouseover="markover(it,index)" // 鼠標(biāo)移動(dòng)到標(biāo)點(diǎn)上的事件 :icon="it.if? iocn:newincon" // 標(biāo)點(diǎn)的樣式 @mouseout="markout(it,index)"> // 鼠標(biāo)從標(biāo)點(diǎn)移走的事件 :show="it.show" // 標(biāo)點(diǎn)提示框的顯示true/false :position="it.position"> // 提示框坐標(biāo) 預(yù)覽：

3.5.6 矢量地圖

Echarts矢量地圖的類(lèi)型有type:'scatter'?散點(diǎn)氣泡圖，可在地圖中顯示不用顏色程度的點(diǎn)type:'effectScatter'?有漣漪特效動(dòng)畫(huà)的散點(diǎn)圖type:'map'?地理區(qū)域的數(shù)據(jù)可視化type:'lines'?地圖航線、路線的可視化引入地圖require('echarts/map/js/china.js')require('echarts/map/js/province/beijing.js')這里我有問(wèn)題，我要引入全國(guó)的省份，就要多寫(xiě)30多個(gè)require，有沒(méi)有大佬能給出更好的辦法？找到一個(gè)全量引用的方法const rjs = require.context('echarts/map/js/province')rjs.keys().forEach(rjs)可以替代require('echarts/map/js/province/beijing.js')require('echarts/map/js/province/shanxi.js')require('echarts/map/js/province/neimenggu.js')等等等。。。地圖配置：option = { // 鼠標(biāo)提示 tooltip : { trigger: 'item', formatter : function(params){ var val = params.data return '名稱(chēng)：'+val.name+'，個(gè)數(shù)：'+val.value[2]+'
'+'總數(shù)：'+val.tol+'，個(gè)數(shù)：'+val.un }, }, // 不同顏色的點(diǎn) visualMap: [ { min: 0, max: 1, show : false, inRange: { color: ['#01cae2', '#e63136',] }, dimension : 3, }, ], // 地圖樣式 geo: { map: 'china', // 地圖樣式，當(dāng)為‘北京’時(shí)，會(huì)顯示北京地圖 roam : true, label: { emphasis: { show: true } }, zoom : 1.2, // 初始大小 scaleLimit : { min : 1.2, // 最小縮放 max : 6 // 最大縮放 }, regions : regions(data) // 省份樣式方法 }, series : [ { name: '分布', type: 'scatter', coordinateSystem: 'geo', // 地圖配置 data: convertData(data.sort(function (a, b) { // 數(shù)據(jù)方法 return b.value - a.value; })), encode: { value : 2 }, hoverAnimation: true, itemStyle: { normal: { // color: '#FF3030', shadowBlur: 1, } }, } ]};當(dāng)點(diǎn)擊省份地圖時(shí)，我們可以進(jìn)入省份地圖的矢量圖myChart.on('click',function(params){ option.geo.map = '北京' myChart.setOption(option, true);})預(yù)覽：

4 、后記

目前還沒(méi)有接入后端數(shù)據(jù)，就是全前臺(tái)的一個(gè)展示。很多都是全量引入，后續(xù)待成熟后，可慢慢精簡(jiǎn)。總結(jié)一下：Vue入門(mén)?+ Echarts入門(mén)?，希望能對(duì)你有用！！！😜😜😜感謝支持。若不足之處，歡迎大家指出，共勉。如果覺(jué)得不錯(cuò)，記得 點(diǎn)贊，謝謝大家?😂

近期精彩內(nèi)容推薦：??

?太真實(shí)了！有個(gè)程序員男友原來(lái)是這樣的！

?終于有人把 HTTPS 原理講清楚了！

?你真的會(huì)用 Postman 嗎？

?Swift 5.3 路線圖

在看點(diǎn)這里好文分享給更多人↓↓

總結(jié)

以上是生活随笔為你收集整理的echarts 折线图 设置y轴最小刻度_【硬货】vue全家桶+Echarts+百度地图，搭建数据可视化系统...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。