作者丨夙言
來源丨前端大牛愛好者(Web-2017)
https://segmentfault.com/a/1190000018993981
本文章篇幅略長，內容有點多，大佬可根據目錄選擇性查閱，新人可一步步來閱讀。1、 前言
1.1 業務場景
突然接到產品說要做一個數據監控的系統。有線圖、柱狀圖、地圖，類似于數據可視化的方式。本人之前從未接觸過Echarts，然后需要2周拿出成果，有點慌😂😂1.2 業務分析
拿到需求看了一下。支持用戶名、密碼登錄，默認顯示一個維度數據，然后點擊可鉆取進入第二維度數據，再點擊進入第三維度數據展示。大致估摸著。。。當然這不是要2周內，全做完。應該是完成步驟6。相對于公司就我一個前端，沒接觸過
- 系統搭建
vue-clivuex記錄登錄信息vue-router路由跳轉- 3個維度的頁面，提取出共用的組件
- 各個組件開發
- 調節樣式，增加UI
- 加入后臺接口數據
- 優化顯示
- 測試
- 上線
Echarts，有問題都沒人討論的情況下。。。心里還是忍不住想吐槽一下😒😒😒1.3 效果展示
這里列出了第一維度頁面的樣式。文字請無視，哈哈。
2 、系統安裝
吐槽歸吐槽，活還是要干的。😎因為本人最熟悉的還是vue，所以還是選擇了用vue全家桶來做。這部分可參考?vue build2.1 安裝node環境
- 下載安裝
node環境，直接去官網下載即可?node.js
node -vnpm -v查看是否安裝成功以及版本2.2 安裝Vue項目
2.2.1 安裝vue
官方文檔：vuejs這里我們使用npm的方式npm i vue
2.2.2 安裝Vue CLI
官方文檔：vue CLInpm i -g @vue/cli
vue -V2.2.3 創建項目
這里安裝的時候，注意將我們要使用的安裝上。vuex、vue-router，其他可根據需要添加。- 方法一
vue create hello-world
- 方法二
vue ui
2.2.4 安裝插件
- 方法一
npm i xxx這里介紹一下?-S -D -g的區別
- npm i -S xxx 文件寫入dependencies，用于工程中開發時使用到的插件，會發布到生產環境如UI，JS等。
- npm i -D xxx 文件寫入devDependencies，用于工程支持類插件，不會發布到生產環境，如gulp等壓縮打包工具。
- npm i -g xxx 全局安裝，如vue、ncu等。安裝目錄為：C:Users用戶AppDataRoamingnpm
- 方法二
vue ui圖像化界面中包含了若干插件，可點擊安裝，但不一定是最新版本。同時會在hello中引入。其他和方法一沒區別。2.3 安裝Echarts
這里我們為了方便，使用了npm全量引用，后期為了精簡項目可單個引用。npm i echarts -S
main.js中添加
這里建議提前自定義echarts的樣式，并引入到項目中。官方自定義地址：theme-builder在頁面中我們可以如下引用：var myChart = this.$echarts.init(document.getElementById("myid"),'temp')myid是我們要展示的echarts的id。temp是我們的自定義的樣式，同時官方提供了幾個樣式例子，可以node_modules\echarts\theme中找到。2.4 安裝element-ui
這里我們為了方便，使用了npm全量引用，后期為了精簡項目可單個引用。npm i element-ui -S
main.js中添加
2.5 安裝百度地圖
一般vue使用百度地圖有2種方式，- 一種是像官網那樣去應用。如：BMap
- 第二種是使用?
vue-baidu-map
npm i vue-baidu-map -S
main.js中添加。
xxxxxxxx這里填寫自己申請的密鑰。在頁面中，參照文檔，可使用標簽2.6 初始化樣式
css樣式初始化，簡單來說就是為了各個瀏覽器能統一什么的。這里我使用的是?normalize.css下載下來后，在main.js中添加
基本上的準備工作都做好了，接下來就是具體的代碼了。3 、項目搭建
3.1 router、vuex
我這里新建了一個router.js、store.js，大致如下：
哦哈，這里路由定義是為了方便看哈，具體還是根據業務來定義。這里的router.beforeEach路由衛士用于是否登錄校驗。然后我們在main.js中來引用。
更多請參考官方文檔：Vue Router Vuex3.2 Login頁面
登錄頁面沒啥，就是個form提交，由于路由中判斷user.id。所以我們儲存一下，然后跳轉到Index頁面就行。這里只是一種方式，也可以使用Cookie和Session3.3 Index頁面
分析頁面分成了2個大部分- 第一部分是?頭部
- 第二部門是?主體
我們將頭部當做一個組件進行復用。組件的復用可參考官方文檔：https://cn.vuejs.org/v2/guide...3.4 header頁面
頭部比較簡單，除了一些顯示外，還有一個顯示當前時間。這里我們使用了setInterval，每隔1秒去獲取一下當前時間賦值給你定義的v-model就行。同時在離開頁面時，我們清理掉定時器。這里需要我們對Vue的生命周期有一定的了解。獲取當前時間的方法可參考：data-module.js3.5 主體頁面
這里分析一下頁面，主要分成了3塊。- 左邊，包含了2個折線圖。
- 中間，包含了數字和地圖。
- 右邊，包含了柱狀圖和表格。
Echarts配置，適合新手，大佬輕噴。這里需要經常翻閱?Echarts配置項?和?API?了3.5.1 Echarts基本
這里列出基本的渲染寫法，具體的圖形和數據只要修改option就可以了。 export default { mounted(){ this.drawECharts() }, methods:{ drawECharts(){ // temp 是我們的自定義樣式，上面安裝Echarts時有介紹 var myChart = this.$echarts.init(document.getElementById("myecharts"),'temp') var option = {} option = { // 吧啦吧啦 一堆配置 } // 執行渲染圖形和數據的操作 if (option && typeof option === "object") { myChart.setOption(option, true) } } } } // 一定要設置大小，不然不出來，這玩意和canvas一樣 .myecharts{ width : 500px; height : 300px; }3.5.2 線形圖多多實踐，就會發現每個配置和其參數的作用了。option = { // 提示框(就是鼠標放上去后出現的框) tooltip : { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, // 右上角的組件，用于說明，也可進行點擊篩選 legend: { align : 'right', x : 'right', top : 25, selectedMode : 'single', // 我這里設置的單選模式 data:['好','壞'] // 顯示的第一項和第二項，這里的顏色是根據自定義主題的顏色順序來定的 }, // x、y軸顯示一些設置，比如刻度顏色顯示什么的，可在自定義主題設置一部分 xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, // 具體配置項，根據具體項目查看官網配置項說明 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，我們需要顯示默認的一些數據，配置如下// 默認顯示壞的數據myChart.dispatchAction({ type: 'legendSelect', name: '壞',})// 默認顯示第7個數據myChart.dispatchAction({ type: 'showTip', seriesIndex: 1, dataIndex: 6,})預覽：
3.5.3 柱狀圖
3.5.3 柱狀圖這里我們直接用雙柱狀圖來演示。因為名字和數字需要提示和點擊的功能，所以沒有使用echarts的y軸。不然formatter又要寫一堆，雖然用了自定義的，但最開始是用的formatter。可以實現相同展示，但無法操作，如鼠標提示和鼠標點擊。 名稱：{{it.name}}
個數：{{it.num}} {{ it.name.substring(0,4)+'...' }} {{ it.num }} 名稱：{{it.name}}
個數：{{it.num}} {{ it.name.substring(0,4)+'...' }} {{ it.num }} css這里就不貼了，效果就是這2行文字剛好貼在2行柱狀圖前面。接下來是echarts配置。option = { // 鼠標提示框 tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, // 右邊顯示 legend: { selectedMode:false, data: ['好', '壞'], top:5, right:8, }, // 兩個圖坐標的位置 grid: [ {left: '16%', top:'10%', width: '22%', height: '86%'}, {left: '65%', top:'10%', width: '22%', height: '86%'} ], // 兩個圖x軸的設置，這里的gridIndex就是個序號，用于區分 xAxis: [ {gridIndex : 0, show : false}, {gridIndex : 1, show : false}, ], // 兩個圖y軸的設置，注釋的部分是用echarts本身的y軸來顯示名稱和數量的 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', // } // } // } }, ], // 渲染圖形和數據，bar是柱狀圖 // barWidth 柱狀的寬度 // 兩類兩套，所以有4組數據，使用xAxisIndex、yAxisIndex來區分。 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 } }, }, ]}預覽：
3.5.4 表格
3.5.4 表格table我這里使用了element-ui加上修改 UI 默認css?和 滾動條的?css。這里列出一項，其他寫法相似。 :data="tableData" style="min-width: 100%;"> prop="date" min- header-align="center" label="時間"> {{scope.row.date}} {{ scope.row.date }} UI 樣式UI?css的修改，這里我使用了自定義字體哦，完全copy是不起作用的。其他的設置項不做說明，F12打開，隨便玩。.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; }}滾動條的樣式隨意改變看看效果就懂了，谷歌瀏覽器 😅/* 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;}預覽：
3.5.5 百度地圖
3.5.5 百度地圖vue-baidu-map?文檔 :center="map.center" // 地圖中心經緯 {lng: 114.023598, lat: 33.589299} :scroll-wheel-zoom="true" // 地圖是否滾輪縮放 :zoom="map.zoom" // 默認地圖尺寸 :mapStyle="mapStyle" // 地圖樣式 > // 地圖寬高 // 標點 :key="it.id" :position="it.position" // 標點位置 @click="markclick(it,index)" // 標點點擊事件 @mouseover="markover(it,index)" // 鼠標移動到標點上的事件 :icon="it.if? iocn:newincon" // 標點的樣式 @mouseout="markout(it,index)"> // 鼠標從標點移走的事件 :show="it.show" // 標點提示框的顯示true/false :position="it.position"> // 提示框坐標 預覽：
3.5.6 矢量地圖
3.5.6 矢量地圖Echarts矢量地圖的類型有type:'scatter'?散點氣泡圖，可在地圖中顯示不用顏色程度的點type:'effectScatter'?有漣漪特效動畫的散點圖type:'map'?地理區域的數據可視化type:'lines'?地圖航線、路線的可視化引入地圖require('echarts/map/js/china.js')require('echarts/map/js/province/beijing.js')這里我有問題，我要引入全國的省份，就要多寫30多個require，有沒有大佬能給出更好的辦法？找到一個全量引用的方法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 = { // 鼠標提示 tooltip : { trigger: 'item', formatter : function(params){ var val = params.data return '名稱：'+val.name+'，個數：'+val.value[2]+'
'+'總數：'+val.tol+'，個數：'+val.un }, }, // 不同顏色的點 visualMap: [ { min: 0, max: 1, show : false, inRange: { color: ['#01cae2', '#e63136',] }, dimension : 3, }, ], // 地圖樣式 geo: { map: 'china', // 地圖樣式，當為‘北京’時，會顯示北京地圖 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) { // 數據方法 return b.value - a.value; })), encode: { value : 2 }, hoverAnimation: true, itemStyle: { normal: { // color: '#FF3030', shadowBlur: 1, } }, } ]};當點擊省份地圖時，我們可以進入省份地圖的矢量圖myChart.on('click',function(params){ option.geo.map = '北京' myChart.setOption(option, true);})預覽：
4 、后記
4 、后記目前還沒有接入后端數據，就是全前臺的一個展示。很多都是全量引入，后續待成熟后，可慢慢精簡。總結一下：Vue入門?+ Echarts入門?，希望能對你有用！！！😜😜😜感謝支持。若不足之處，歡迎大家指出，共勉。如果覺得不錯，記得 點贊，謝謝大家?😂
近期精彩內容推薦：??
?太真實了！有個程序員男友原來是這樣的！
?終于有人把 HTTPS 原理講清楚了！
?你真的會用 Postman 嗎？
?Swift 5.3 路線圖
在看點這里
好文分享給更多人↓↓
