vue+vuex+axios+echarts画一个动态更新的中国地图

# 安装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容器

初始化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      }    ]  })

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: '',  components: {Index}})Vue.use(ChinaMap)

2.案例代码

GitHub

vue+vuex+axios+echarts画一个动态更新的中国地图