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模块

// 主模块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')

// 中国地图JS文件require('echarts/map/js/china')

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

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

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   }  ] })

import axios from 'axios'

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

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       }      ]     })    }   ) }}

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

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')}

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)