vue+vuex+axios+echarts Draw a dynamically updated map of China

I. Build projects and install plug-ins

# Install vue-cli npm install vue-cli -g # Initialize project vue init webpack china-map # Cut into Catalog cd china-map # Installation Project Dependency npm install # Install vuex npm install vuex --save # Install axios npm install axios --save # Install ECharts npm install echarts --save

II. Project structure

├── index.html ├── main.js ├── components │ └── index.vue └── store ├── index.js # Assemble modules and export store files └── modules └── ChinaMap.js # China Map Vuex Module

3. Introduce maps of China and draw basic charts

// Main module let echarts = require('echarts/lib/echarts') // Scatter plot require('echarts/lib/chart/scatter') // Scatter map enlargement require('echarts/lib/chart/effectScatter') // Map require('echarts/lib/chart/map') // Legend require('echarts/lib/component/legend') // prompt box require('echarts/lib/component/tooltip') // Map geo require('echarts/lib/component/geo')

2. If you import a Chinese Map JS file, the map will be automatically registered; you can also import a json file by axios, which requires manual registration.Echarts.registerMap('China',ChinaJson.data).

// China Map JS File require('echarts/map/js/china')

3. Prepare a DOM container with a fixed width and height and initialize an echarts instance inside mounted.

DOM Container

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

Initialize echarts instance

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

4. Set the initial blank map, there are many echarts parameters to set here, reference ECharts Configuration Item Manual.

chinaMap.setOption({ backgroundColor: '#272D3A', // Title title: { text: 'China Map Shining', left: 'center', textStyle: { color: '#fff' } }, // Tips for dots on the map tooltip: { trigger: 'item', formatter: function (params) { return params.name + ' : ' + params.value[2] } }, // Legend button click to select which not to show legend: { orient: 'vertical', left: 'left', top: 'bottom', data: ['Regional heat', 'top5'], textStyle: { color: '#fff' } }, // Geographic coordinate system components geo: { map: 'china', label: { // true displays the city name emphasis: { show: false } }, itemStyle: { // Map Background Color normal: { areaColor: '#465471', borderColor: '#282F3C' }, // When suspended emphasis: { areaColor: '#8796B4' } } }, // Series List series: [ { name: 'Regional heat', // Type of table Here is the scatter type: 'scatter', // Using geographic coordinate systems, specify the corresponding geographic coordinate system components through geoIndex coordinateSystem: 'geo', data: [], // Marker size symbolSize: 12, // Display values on dots while the mouse is hovering label: { normal: { show: false }, emphasis: { show: false } }, itemStyle: { normal: { color: '#ddb926' }, // The dot style changes when the mouse hovers emphasis: { borderColor: '#fff', borderWidth: 1 } } }, { name: 'top5', // Type of table Here is the scatter type: 'effectScatter', // Using geographic coordinate systems, specify the corresponding geographic coordinate system components through geoIndex coordinateSystem: 'geo', data: [], // Marker size symbolSize: 12, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { show: false } }, itemStyle: { normal: { color: '#f4e925', shadowBlur: 10, shadowColor: '#333' } }, zlevel: 1 } ] })

4. Configure Vuex to manage and distribute data

1. In ChinaMap.js Vuex and axios were introduced.

import axios from 'axios'

2. Set the necessary variables.

const state = { geoCoordMap: {'Hong Kong Special Administrative Region': [114.08, 22.2], 'Macao Special Administrative Region': [113.33, 22.13], 'Taipei': [121.5, 25.03]/*Wait*/}, // Glowing City showCityNumber: 5, showCount: 0, // Is loading required isLoading: true }

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

const actions = { fetchHeatChinaRealData (, 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: 'Regional heat', data: paleData }, { name: 'top5', data: lightData } ] }) } ) } }

Now npm run dev can see the small yellow dots that are flashing on the map of China.If you want to change her to make the presentation dynamic, you canIndex.vueAdd:

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

stay ChinaMap.js fetchHeatChinaRealData modification in mutations of actions in:

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

5. Other

1. Don't forget toMain.js Vuex is introduced.

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: }) Vue.use(ChinaMap)

2. Case Code

GitHub

vue+vuex+axios+echarts Draw a dynamically updated map of China

20 July 2020, 11:30 | Views: 9078