vue+vuex+axios+echarts畫一個動態更新的中國地圖

標籤：vue   javascript   vuex   echarts   axios   

一. 產生項目及安裝外掛程式

# 安裝vue-clinpm install vue-cli -g# 初始化項目vue init webpack china-map# 切到目錄下cd china-map# 安裝項目依賴npm install# 安裝 vuexnpm install vuex --save# 安裝 axiosnpm install axios --save# 安裝 EChartsnpm install echarts --save

二. 項目結構

├── index.html├── main.js├── components│   └── index.vue└── store    ├── index.js          # 組裝模組及匯出store的檔案    └── modules        └── ChinaMap.js   # 中國地圖Vuex模組

三. 引入中國地圖並繪製基本的圖表

1.按需求引入與中國地圖相關的Echarts圖表和組。

// 主模組let echarts = require('echarts/lib/echarts')// 散佈圖require('echarts/lib/chart/scatter')// 散佈圖放大require('echarts/lib/chart/effectScatter')// 地圖require('echarts/lib/chart/map')// 圖例require('echarts/lib/component/legend')// 提示框require('echarts/lib/component/tooltip')// 地圖georequire('echarts/lib/component/geo')

2.引入中國地圖JS檔案，會自動註冊地圖；也可以通過axios方式引入json檔案，需要手動註冊echarts.registerMap('china', chinaJson.data)。

// 中國地圖JS檔案require('echarts/map/js/china')

3.準備一個有固定寬高的DOM容器並在mounted裡面初始化一個echarts執行個體。

DOM容器

<template>  <div id="china-map"></div></template>

初始化echarts執行個體

let chinaMap = echarts.init(document.getElementById('china-map'))

4.設定初始化的空白地圖，這裡需要設定很多echarts參數，參考ECharts配置項手冊。

chinaMap.setOption({    backgroundColor: '#272D3A',    // 標題    title: {      text: '中國地圖閃閃發光',      left: 'center',      textStyle: {        color: '#fff'      }    },    // 地圖上圓點的提示    tooltip: {      trigger: 'item',      formatter: function (params) {        return params.name + ' : ' + params.value[2]      }    },    // 圖例按鈕 點擊可選擇哪些不顯示    legend: {      orient: 'vertical',      left: 'left',      top: 'bottom',      data: ['地區熱度', 'top5'],      textStyle: {        color: '#fff'      }    },    // 地理座標系組件    geo: {      map: 'china',      label: {        // true會顯示城市名        emphasis: {          show: false        }      },      itemStyle: {        // 地圖背景色        normal: {          areaColor: '#465471',          borderColor: '#282F3C'        },        // 懸浮時        emphasis: {          areaColor: '#8796B4'        }      }    },    // 系列列表    series: [      {        name: '地區熱度',        // 表的類型 這裡是散點        type: 'scatter',        // 使用地理座標系，通過 geoIndex 指定相應的地理座標系組件        coordinateSystem: 'geo',        data: [],        // 標記的大小        symbolSize: 12,        // 滑鼠懸浮的時候在圓點上顯示數值        label: {          normal: {            show: false          },          emphasis: {            show: false          }        },        itemStyle: {          normal: {            color: '#ddb926'          },          // 滑鼠懸浮的時候圓點樣式變化          emphasis: {            borderColor: '#fff',            borderWidth: 1          }        }      },      {        name: 'top5',        // 表的類型 這裡是散點        type: 'effectScatter',        // 使用地理座標系，通過 geoIndex 指定相應的地理座標系組件        coordinateSystem: 'geo',        data: [],        // 標記的大小        symbolSize: 12,        showEffectOn: 'render',        rippleEffect: {          brushType: 'stroke'        },        hoverAnimation: true,        label: {          normal: {            show: false          }        },        itemStyle: {          normal: {            color: '#f4e925',            shadowBlur: 10,            shadowColor: '#333'          }        },        zlevel: 1      }    ]  })

四. 配置Vuex管理和分發資料

1.在ChinaMap.js中引入vuex和axios。

import axios from 'axios'

2.設定必要的變數。

const state = {  geoCoordMap: {'香港特別行政區': [114.08, 22.2], '澳門特別行政區': [113.33, 22.13], '台北': [121.5, 25.03]/*等等*/},  // 發光的城市  showCityNumber: 5,  showCount: 0,  // 是否需要loading  isLoading: true}

3.在actions中抓取後台資料並更新地圖。

const actions = {  fetchHeatChinaRealData ({state, commit}, chartsObj) {    axios.get('static/data/heatChinaRealData.json')      .then(        (res) => {          let data = res.data          let paleData = ((state, data) => {            let arr = []            let len = data.length            while (len--) {              let geoCoord = state.geoCoordMap[data[len].name]              if (geoCoord) {                arr.push({                  name: data[len].name,                  value: geoCoord.concat(data[len].value)                })              }            }            return arr          })(state, data)          let lightData = paleData.sort((a, b) => {            return b.value - a.value          }).slice(0, state.showCityNumber)          chartsObj.setOption({            series: [              {                name: '地區熱度',                data: paleData              },              {                name: 'top5',                data: lightData              }            ]          })        }      )  }}

此時npm run dev已經可以看到中國地圖上閃閃的×××小點點。若想改變她使動態展示，可以在index.vue中mounted下面加上：

chinaMap.showLoading(showLoadingDefault)this.$store.commit('openLoading')this.$store.dispatch('fetchHeatChinaRealData', chinaMap)setInterval(() => {    this.$store.dispatch('fetchHeatChinaRealData', chinaMap)}, 1000)

在ChinaMap.js中actions的mutations中fetchHeatChinaRealData修改：

let lightData = paleData.sort((a, b) => {    return b.value - a.value}).slice(0 + state.showCount, state.showCityNumber + state.showCount)if (state.isLoading) {    chartsObj.hideLoading()    commit('closeLoading')}

五. 其它

1.別忘了在main.js裡面引入Vuex。

import Vue from 'vue'import Index from './components/index.vue'import store from './store/index'let ChinaMap = new Vue({  el: '#app',  store,  template: '<Index/>',  components: {Index}})Vue.use(ChinaMap)

2.案例代碼

GitHub

vue+vuex+axios+echarts畫一個動態更新的中國地圖

vue+vuex+axios+echarts畫一個動態更新的中國地圖