Vue+vuex+axios+echarts draw a dynamic updated map of China

I. Build the project and install the plugin

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

Two. Project structure

├── index.html├── main.js├── components│   └── index.vue└── store    ├── index.js          # 组装模块及导出store的文件    └── modules        └── ChinaMap.js   # 中国地图Vuex模块

Three. Introduce the Chinese map and draw the basic chart

1. Introduce echarts charts and groups related to Chinese maps as required.

// 主模块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. The introduction of the Chinese map JS file will automatically register the map, you can also introduce the JSON file by Axios, you need to register manually echarts.registerMap(‘china‘, chinaJson.data) .

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

3. Prepare a DOM container with a fixed width and height and initialize a Echarts instance inside the mounted.

Dom Container

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

Initializing an Echarts instance

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

4. Set a blank map for initialization, where you need to set many echarts parameters, refer to the Echarts configuration item manual.

Chinamap.setoption ({backgroundcolor: ' #272D3A ',//title: {text: ' The Chinese map shines ', left: ' Center ',  TextStyle: {color: ' #fff '}},//cue tooltip for dots on the map: {trigger: ' item ', formatter:function (params) {return params.name + ': ' + Params.value[2]}},//Legend button click to select which does not show legend: {Orient: ' vertic    Al ', left: ' Left ', top: ' Bottom ', data: [' Region heat ', ' top5 '], TextStyle: {color: ' #fff '}        },//geographic coordinate system component GEO: {map: ' China ', Label: {//True will show city name emphasis: {Show:false }}, ItemStyle: {//Map background color normal: {areacolor: ' #465471 ', bordercolor: ' # 282F3C '},//hover emphasis: {areacolor: ' #8796B4 '}},//Series list Serie        S: [{name: ' Region Heat ',///table Type here is scatter type: ' Scatter ',//use geographic coordinate system, specify corresponding geographic coordinate system component by Geoindex CoordinaTesystem: ' Geo ', data: [],//Mark size symbolsize:12,//mouse hover when the value is displayed on the dot label: { Normal: {show:false}, emphasis: {Show:false}}, ite            Mstyle: {normal: {color: ' #ddb926 '},//mouse hover when dot style changes emphasis: {  BorderColor: ' #fff ', Borderwidth:1}}}, {name: ' TOP5 ',//type of table Here is the scatter type: ' Effectscatter ',//using a geographic coordinate system, specifying the corresponding geographic coordinate system component CoordinateSystem by Geoindex: ' Geo ', dat A: [],//Mark size symbolsize:12, Showeffecton: ' Render ', Rippleeffect: {brushtype: ' s        Troke '}, hoveranimation:true, Label: {normal: {show:false} }, ItemStyle: {normal: {color: ' #f4e925 ', Shadowblur:10, Shadowcolor:       ' #333 '} }, zlevel:1}]}) 

Four. Configure VUEX to manage and distribute data

1. Introduction of Vuex and Axios in Chinamap.js.

import axios from ‘axios‘

2. Set the necessary variables.

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

3. Crawl background data in actions and update the map.

Const ACTIONS = {Fetchheatchinarealdata ({state, Commit}, Chartsobj) {axios.get (' Static/data/heatchinarealdata.json ')            ). Then (res) + {Let data = res.data-Paledata = (state, data) and { Let arr = [] Let len = Data.length while (len--) {Let Geocoord = State.geocoordmap[dat                  A[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: ' Region Heat ',              Data:paledata}, {name: ' TOP5 ', data:lightdata }            ]          })        }      )  }} 

Now npm run dev you can see the yellow dots on the Chinese map. If you want to change her to make a dynamic display, you can add the following in Index.vue mounted:

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

Fetchheatchinarealdata changes in the mutations of actions in Chinamap.js:

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

Five. Other

1. Don't forget to introduce Vuex into the main.js.

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. Case code

GitHub

Vue+vuex+axios+echarts draw a dynamic updated map of China

Vue+vuex+axios+echarts draw a dynamic updated map of China