echarts formatter_vue全家桶+Echarts+百度地圖，搭建資料可視化系統作者 | xrkffgg來源 | https://www.jianshu.com/p/f4f90d44227f

作者 | xrkffgg

來源 | https://www.jianshu.com/p/f4f90d44227f

1、 前言

1.1 業務場景

突然接到産品說要做一個資料監控的系統。有線圖、柱狀圖、地圖，類似于資料可視化的方式。本人之前從未接觸過

Echarts

，然後需要2周拿出成果，有點慌

1.2 業務分析

拿到需求看了一下支援使用者名、密碼登入，預設顯示一個次元資料，然後點選可鑽取進入第二次元資料，再點選進入第三次元資料展示。大緻估摸着。。。

1. 系統搭建

   vue-cli

2. vuex

   記錄登入資訊

3. vue-router

   路由跳轉
4. 3個次元的頁面，提取出共用的元件
5. 各個元件開發
6. 調節樣式，增加UI
7. 加入背景接口資料
8. 優化顯示
9. 測試
10. 上線

當然這不是要2周内，全做完。應該是完成步驟6。相對于公司就我一個前端，沒接觸過

Echarts

，有問題都沒人讨論的情況下。。。心裡還是忍不住想吐槽一下

1.3 效果展示

這裡列出了第一次元頁面的樣式。文字請無視，哈哈。

2、 系統安裝

吐槽歸吐槽，活還是要幹的。?

因為本人最熟悉的還是vue，是以還是選擇了用vue全家桶來做。這部分可參考 vue build

2.1 安裝node環境

• 下載下傳安裝

  node

  環境，直接去官網下載下傳即可 node.js

安裝完後可在指令行運作

node -v

npm -v

 檢視是否安裝成功以及版本

2.2 安裝Vue項目

2.2.1 安裝vue

官方文檔：vuejs這裡我們使用

npm

的方式

• npm i vue

2.2.2 安裝Vue CLI

官方文檔：vue CLI

• npm i -g @vue/cli

安裝之後，你就可以在指令行中通路 vue 指令。你可以用這個指令來檢視其版本。

vue -V

2.2.3 建立項目

這裡安裝的時候，注意将我們要使用的安裝上。

vuex

、

vue-router

，其他可根據需要添加。 方法一

這裡參照官方網站，有很詳細的介紹。參照：vue create

方法二使用圖形化界面

• vue ui

界面含中文，很好操作。參照：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\使用者\AppData\Roaming\npm

方法二

vue ui

圖像化界面中包含了若幹插件，可點選安裝，但不一定是最新版本。同時會在hello中引入。其他和方法一沒差別。

2.3 安裝Echarts

這裡我們為了友善，使用了

npm

全量引用，後期為了精簡項目可單個引用。

然後在

main.js

中添加

這裡建議提前自定義

echarts

的樣式，并引入到項目中。官方自定義位址：theme-builder在頁面中我們可以如下引用：

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

不管是哪一種都要去申請賬号和密鑰。申請位址為：百度地圖密鑰(ak)這裡我使用了第二種。vue-baidu-map文檔 然後在

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 Vuex

3.2 、Login頁面

登入頁面沒啥，就是個form送出，由于路由中判斷

user.id

。是以我們儲存一下，然後跳轉到Index頁面就行。這裡隻是一種方式，也可以使用

Cookie

和

Session

3.3 Index頁面

分析頁面分成了2個大部分

• 第一部分是 頭部
• 第二部門是 主體

我們将頭部當做一個元件進行複用。元件的複用可參考官方文檔：https://cn.vuejs.org/v2/guide/components.html

3.4 header頁面

頭部比較簡單，除了一些顯示外，還有一個顯示目前時間。這裡我們使用了

setInterval

，每隔1秒去擷取一下目前時間指派給你定義的

v-model

就行。同時在離開頁面時，我們清理掉定時器。這裡需要我們對

Vue

的生命周期有一定的了解。擷取目前時間的方法可參考：data-module.js

3.5 主體頁面

這裡分析一下頁面，主要分成了3塊。

1. 左邊，包含了2個折線圖。
2. 中間，包含了數字和地圖。
3. 右邊，包含了柱狀圖和表格。

接下來主要介紹一下，自己這2周摸索出來的一些

Echarts

配置，适合新手，大佬輕噴。

這裡需要經常翻閱  Echarts配置項 和  API 了

3.5.1 Echarts基本

這裡列出基本的渲染寫法，具體的圖形和資料隻要修改

option

就可以了。

3.5.2 線形圖

多多實踐，就會發現每個配置和其參數的作用了。

預覽：

3.5.3 柱狀圖

這裡我們直接用雙柱狀圖來示範。因為名字和數字需要提示和點選的功能，是以沒有使用

echarts

的

y

軸。不然

formatter

又要寫一堆，雖然用了自定義的，但最開始是用的

formatter

。可以實作相同展示，但無法操作，如滑鼠提示和滑鼠點選。

class="left">

<div v-for="it in its1" :key="it.id">

<el-tooltip class="item" effect="light" placement="bottom-start">

<div slot="content">名稱：{{it.name}}<br/>個數：{{it.num}}div>

<div class="name" @click="go"> {{ it.name.substring(0,4)+'...' }}div>

el-tooltip>

<div class="num">{{ it.num }}div>

div>

div>

class="right">

<div v-for="it in its2" :key="it.id">

<el-tooltip class="item" effect="light" placement="bottom-start">

<div slot="content">名稱：{{it.name}}<br/>個數：{{it.num}}div>

<div class="name" @click="go"> {{ it.name.substring(0,4)+'...' }}div>

el-tooltip>

<div class="num">{{ it.num }}div>

div>

div>

"myecharts" class="myecharts">

css

這裡就不貼了，效果就是這2行文字剛好貼在2行柱狀圖前面。接下來是

echarts

配置。

預覽：

3.5.4 表格

table

我這裡使用了

element-ui

加上修改 UI 預設

css

 和 滾動條的 

css

。這裡列出一項，其他寫法相似。

UI 樣式UI 

css

的修改，這裡我使用了自定義字型哦，完全copy是不起作用的。其他的設定項不做說明，F12打開，随便玩。

滾動條的樣式随意改變看看效果就懂了，谷歌浏覽器 ?

預覽：

3.5.5 百度地圖

vue-baidu-map 文檔

"it.mess"

> // 提示框内容

template>

map>

預覽：

3.5.6 矢量地圖

Echarts矢量地圖的類型有

type:'scatter'

 散點氣泡圖，可在地圖中顯示不用顔色程度的點

type:'effectScatter'

 有漣漪特效動畫的散點圖

type:'map'

 地理區域的資料可視化

type:'lines'

 地圖航線、路線的可視化引入地圖

這裡我有問題，我要引入全國的省份，就要多寫30多個

require

，有沒有大佬能給出更好的辦法？找到一個全量引用的方法

可以替代

等等等。。。

地圖配置：

當點選省份地圖時，我們可以進入省份地圖的矢量圖

預覽：

4 、後記

目前還沒有接入後端資料，就是全前台的一個展示。很多都是全量引入，後續待成熟後，可慢慢精簡。總結一下：Vue入門 + Echarts入門 ，希望能對你有用！！！???感謝支援。若不足之處，歡迎大家指出，共勉。如果覺得不錯，記得 點贊，謝謝大家 ?VUE相關圖書