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

新增文章：vue全家桶+Echarts+百度地圖，搭建數(shù)據(jù)可視化系統(tǒng)（【續(xù)】接口篇）

1 前言

1.1 業(yè)務(wù)場景

突然接到產(chǎn)品說要做一個(gè)數(shù)據(jù)監(jiān)控的系統(tǒng)滔韵。有線圖逻谦、柱狀圖、地圖陪蜻，類似于數(shù)據(jù)可視化的方式邦马。

本人之前從未接觸過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ù)展示父丰。

大致估摸著。掘宪。蛾扇。

1. 系統(tǒng)搭建vue-cli
2. vuex記錄登錄信息
3. vue-router路由跳轉(zhuǎn)
4. 3個(gè)維度的頁面，提取出共用的組件
5. 各個(gè)組件開發(fā)
6. 調(diào)節(jié)樣式魏滚，增加UI
7. 加入后臺接口數(shù)據(jù)
8. 優(yōu)化顯示
9. 測試
10. 上線

當(dāng)然這不是要2周內(nèi)镀首，全做完。應(yīng)該是完成步驟6鼠次。

相對于公司就我一個(gè)前端更哄，沒接觸過Echarts，有問題都沒人討論的情況下须眷。竖瘾。沟突。

心里還是忍不住想吐槽一下??????

1.3 效果展示

這里列出了第一維度頁面的樣式花颗。文字請無視，哈哈惠拭。

image

2 系統(tǒng)安裝

吐槽歸吐槽扩劝，活還是要干的。??

因?yàn)楸救俗钍煜さ倪€是vue职辅，所以還是選擇了用vue全家桶來做棒呛。這部分可參考 vue build

2.1 安裝node環(huán)境

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

安裝完后可在命令行運(yùn)行node -v npm -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

安裝之后域携，你就可以在命令行中訪問 vue 命令簇秒。你可以用這個(gè)命令來查看其版本。vue -V

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

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

1. 方法一

• vue create hello-world

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

2. 方法二

使用圖形化界面

• vue ui

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

2.2.4 安裝插件

1. 方法一

最直接也是推薦的 npm i xxx

這里介紹一下 -S -D -g 的區(qū)別

• npm i -S xxx 文件寫入dependencies，用于工程中開發(fā)時(shí)使用到的插件贩猎，會發(fā)布到生產(chǎn)環(huán)境如UI熊户，JS等。
• npm i -D xxx 文件寫入devDependencies吭服，用于工程支持類插件敏弃，不會發(fā)布到生產(chǎn)環(huán)境，如gulp等壓縮打包工具噪馏。
• npm i -g xxx 全局安裝麦到，如vue、ncu等欠肾。安裝目錄為：C:\Users\用戶\AppData\Roaming\npm

2. 方法二

vue ui圖像化界面中包含了若干插件瓶颠，可點(diǎn)擊安裝，但不一定是最新版本刺桃。

同時(shí)會在hello中引入粹淋。其他和方法一沒區(qū)別。

2.3 安裝Echarts

這里我們?yōu)榱朔奖闵龋褂昧?code>npm全量引用桃移，后期為了精簡項(xiàng)目可單個(gè)引用。

• npm i echarts -S

然后在main.js中添加

image

這里建議提前自定義echarts的樣式葛碧，并引入到項(xiàng)目中借杰。官方自定義地址：theme-builder

在頁面中我們可以如下引用：
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)榱朔奖闳槿疲褂昧?code>npm全量引用绞惦，后期為了精簡項(xiàng)目可單個(gè)引用。

• npm i element-ui -S

然后在main.js中添加

image

2.5 安裝百度地圖

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

• 一種是像官網(wǎng)那樣去應(yīng)用济蝉。如：BMap

• 第二種是使用 vue-baidu-map

不管是哪一種都要去申請賬號和密鑰。申請地址為：百度地圖密鑰(ak)

這里我使用了第二種菠发。vue-baidu-map文檔

• npm i vue-baidu-map -S

然后在main.js中添加

image

xxxxxxxx這里填寫自己申請的密鑰王滤。

在頁面中，參照文檔雷酪，可使用標(biāo)簽<baidu-map/>來調(diào)用淑仆。

2.6 初始化樣式

css樣式初始化，簡單來說就是為了各個(gè)瀏覽器能統(tǒng)一什么的哥力。

這里我使用的是 normalize.css

下載下來后蔗怠，在main.js中添加

image

基本上的準(zhǔn)備工作都做好了墩弯，接下來就是具體的代碼了。

3 項(xiàng)目搭建

3.1 router寞射、vuex

我這里新建了一個(gè)router.js渔工、store.js，大致如下：

image

哦哈桥温，這里路由定義是為了方便看哈引矩，具體還是根據(jù)業(yè)務(wù)來定義。

這里的router.beforeEach 路由衛(wèi)士用于是否登錄校驗(yàn)侵浸。

然后我們在main.js中來引用旺韭。

image

更多請參考官方文檔：Vue Router Vuex

3.2 Login頁面

登錄頁面沒啥，就是個(gè)form提交掏觉，由于路由中判斷user.id区端。所以我們儲存一下，然后跳轉(zhuǎn)到Index頁面就行澳腹。

這里只是一種方式织盼，也可以使用Cookie和Session

3.3 Index頁面

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

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

image

我們將頭部當(dāng)做一個(gè)組件進(jìn)行復(fù)用。

組件的復(fù)用可參考官方文檔：https://cn.vuejs.org/v2/guide/components.html

3.4 header頁面

頭部比較簡單酱塔，除了一些顯示外沥邻，還有一個(gè)顯示當(dāng)前時(shí)間。

這里我們使用了setInterval羊娃，每隔1秒去獲取一下當(dāng)前時(shí)間賦值給你定義的v-model就行唐全。

同時(shí)在離開頁面時(shí)，我們清理掉定時(shí)器迁沫。

這里需要我們對Vue的生命周期有一定的了解芦瘾。

獲取當(dāng)前時(shí)間的方法可參考：data-module.js

3.5 主體頁面

這里分析一下頁面，主要分成了3塊集畅。

1. 左邊，包含了2個(gè)折線圖缅糟。
2. 中間挺智，包含了數(shù)字和地圖。
3. 右邊窗宦，包含了柱狀圖和表格赦颇。

接下來主要介紹一下，自己這2周摸索出來的一些Echarts配置赴涵，適合新手媒怯，大佬輕噴。

這里需要經(jīng)常翻閱 Echarts配置項(xiàng) 和 API 了

3.5.1 Echarts基本

這里列出基本的渲染寫法髓窜，具體的圖形和數(shù)據(jù)只要修改option就可以了扇苞。

<template>
    <div id="myecharts" class="myecharts">
</template>

<script>
    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)
                }
            }
        }
    }
</script>

<style>
    //  一定要設(shè)置大小，不然不出來鳖敷，這玩意和canvas一樣
    .myecharts{
        width : 500px;
        height : 300px;
    }
</style>

3.5.2 線形圖

多多實(shí)踐脖苏，就會發(fā)現(xiàn)每個(gè)配置和其參數(shù)的作用了。

option = {
    // 提示框（就是鼠標(biāo)放上去后出現(xiàn)的框）
    tooltip : {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    
    //  右上角的組件定踱，用于說明棍潘，也可進(jìn)行點(diǎn)擊篩選
    legend: {
        align : 'right',
        x : 'right',
        top : 25,
        selectedMode : 'single',    //  我這里設(shè)置的單選模式
        data:['好','壞']            //  顯示的第一項(xiàng)和第二項(xiàng)，這里的顏色是根據(jù)自定義主題的顏色順序來定的
    },
    
    //  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)說明
    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ù)覽：

image

3.5.3 柱狀圖

這里我們直接用雙柱狀圖來演示敢课。

因?yàn)槊趾蛿?shù)字需要提示和點(diǎn)擊的功能阶祭，所以沒有使用echarts的y軸。

不然formatter又要寫一堆直秆，雖然用了自定義的濒募，但最開始是用的formatter。

可以實(shí)現(xiàn)相同展示圾结，但無法操作瑰剃，如鼠標(biāo)提示和鼠標(biāo)點(diǎn)擊。

<div 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/>個(gè)數(shù)：{{it.num}}</div>
            <div class="name" @click="go"> {{ it.name.substring(0,4)+'...' }}</div>
        </el-tooltip>
        <div class="num">{{ it.num }}</div>
    </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/>個(gè)數(shù)：{{it.num}}</div>
            <div class="name" @click="go"> {{ it.name.substring(0,4)+'...' }}</div>
        </el-tooltip>
        <div class="num">{{ it.num }}</div>
    </div>
</div>

<div id="myecharts" class="myecharts">

css這里就不貼了筝野，效果就是這2行文字剛好貼在2行柱狀圖前面晌姚。

接下來是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è)序號挥唠，用于區(qū)分
    xAxis: [
        {gridIndex : 0, show : false},
        {gridIndex : 1, show : false},
    ],
    
    // 兩個(gè)圖y軸的設(shè)置，注釋的部分是用echarts本身的y軸來顯示名稱和數(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 柱狀的寬度
    //  兩類兩套宝磨，所以有4組數(shù)據(jù)，使用xAxisIndex盅安、yAxisIndex來區(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ù)覽：

image

3.5.4 表格

table我這里使用了element-ui加上修改 UI 默認(rèn)css 和 滾動條的 css。

這里列出一項(xiàng)别瞭，其他寫法相似窿祥。

<el-table
    :data="tableData"
    height="252"
    style="min-width: 100%;">
    <el-table-column
        prop="date"
        min-width="12"
        header-align="center"
        label="時(shí)間">
        <template slot-scope="scope">
            <template v-if="scope.row.if == '1'">
                <img src="../../assets/img/new.png"/>
                <div style="color:#E63136;margin-top:-27px;margin-left:35px;">
                    {{scope.row.date}}
                </div>
            </template>
            <template v-else>
                <div style="margin-left:35px;">
                    {{ scope.row.date }}
                </div>
            </template>
        </template>
    </el-table-column>
</el-table>

• UI 樣式

UI css的修改，這里我使用了自定義字體哦蝙寨，完全copy是不起作用的晒衩。

其他的設(shè)置項(xiàng)不做說明嗤瞎，F(xiàn)12打開，隨便玩浸遗。

.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;
}

預(yù)覽：

image

3.5.5 百度地圖

vue-baidu-map 文檔

<baidu-map 
    :center="map.center"        //  地圖中心經(jīng)緯 {lng: 114.023598, lat: 33.589299}
    :scroll-wheel-zoom="true"   //  地圖是否滾輪縮放
    :zoom="map.zoom"            //  默認(rèn)地圖尺寸
    :mapStyle="mapStyle"        //  地圖樣式
    class="baidumap">           //  地圖寬高
    <template v-for="(it,index) in ms">     //  標(biāo)點(diǎn)
        <bm-marker 
            :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)移動到標(biāo)點(diǎn)上的事件
            :icon="it.if? iocn:newincon"    //  標(biāo)點(diǎn)的樣式
            @mouseout="markout(it,index)">  //  鼠標(biāo)從標(biāo)點(diǎn)移走的事件
            <bm-info-window
                :show="it.show"             //  標(biāo)點(diǎn)提示框的顯示true/false
                :position="it.position">    //  提示框坐標(biāo)
                <p v-text="it.mess"></p>    //  提示框內(nèi)容
            </bm-info-window>
        </bm-marker>
    </template>
</baidu-map>

預(yù)覽：

image

3.5.6 矢量地圖

Echarts矢量地圖的類型有

• type:'scatter' 散點(diǎn)氣泡圖，可在地圖中顯示不用顏色程度的點(diǎn)
• type:'effectScatter' 有漣漪特效動畫的散點(diǎn)圖
• type:'map' 地理區(qū)域的數(shù)據(jù)可視化
• type:'lines' 地圖航線跛锌、路線的可視化

引入地圖

require('echarts/map/js/china.js')
require('echarts/map/js/province/beijing.js')

這里我有問題弃秆，我要引入全國的省份，就要多寫30多個(gè)require髓帽，有沒有大佬能給出更好的辦法菠赚？

找到一個(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 '名稱：'+val.name+'，個(gè)數(shù)：'+val.value[2]+'<br/>'+'總數(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í)，會顯示北京地圖   
        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ù)覽：

image

image

4 后記

目前還沒有接入后端數(shù)據(jù)塌忽，就是全前臺的一個(gè)展示。很多都是全量引入失驶，后續(xù)待成熟后土居，可慢慢精簡。

總結(jié)一下：Vue入門 + Echarts入門 嬉探，希望能對你有用２烈！涩堤！??????

感謝支持眷蜓。若不足之處，歡迎大家指出定躏，共勉账磺。

如果覺得不錯(cuò)，記得 點(diǎn)贊痊远，謝謝大家 ??

歡迎關(guān)注 我的： 【Github】【掘金】【簡書】【CSDN】【OSCHINA】【SF】

本文章采用 知識共享署名-非商業(yè)性使用-相同方式共享 4.0 國際許可協(xié)議 進(jìn)行許可。

出處為：https://github.com/xrkffgg/Tools