How to draw a dynamically updated map of China in the front-end project

Today teaches us a cool code, glittering map of China. Just need to use vue+vuex+axios+echarts to make this map dynamic update, let's take a look.

I. Build the project and install the plugin

# installation VUE-CLINPM Install vue-cli-g# Initialize Project Vue init webpack china-map# cut to directory CD china-map# Setup project dependent npm install# install VUEXNPM Insta ll Vuex--save# installing AXIOSNPM install Axios--save# installing ECHARTSNPM install Echarts--save

Two. Project structure

├──index.html├──main.js├──components│  └──index.vue└──store  ├──index.js     # assembly module and export store file  └── Modules    └──chinamap.js  # China map Vuex Module

Three. Introduce the Chinese map and draw the basic chart

1. Introduce echarts charts and components related to China maps as required.

Main module Let Echarts = require (' echarts/lib/echarts ')//scatter plot require (' echarts/lib/chart/scatter ')//Scatter plot amplification require (' Echarts /lib/chart/effectscatter ')//Map require (' echarts/lib/chart/map ')//Legend require (' echarts/lib/component/legend ')// Cue box require (' Echarts/lib/component/tooltip ')//Map 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 mode, you need to manually register 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 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 map: {trigger: ' Item ', formatter:function (params) {return params.name   + ': ' + Params.value[2 '}},//Legend button click to select which does not show legend: {Orient: ' vertical ', left: ' Go ', 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 ', Borde Rcolor: ' #282F3C '},//Suspended emphasis: {areacolor: ' #8796B4 '}}},//Series list: [{name: ' Ground     Zone Heat ',//the type of the table here is the scatter type: ' Scatter ',//using a geographic coordinate system, specifying the corresponding geographic coordinate system component CoordinateSystem by Geoindex: ' Geo ', data: [],      The size of the marker symbolsize:12,//mouse hover when the value is displayed on the dot label: {normal: {show:false}, emphasis: {    Show:false}}, ItemStyle: {normal: {color: ' #ddb926 '},//mouse hover when dot style changes emphasis: {bordercolor: ' #fff ', Borderwidth:1}}}, {name: ' TOP5 ',//the type of table here is the scatter type: ' Effectscatter ',//using a geographic coordinate system, via GE    OINDEX specifies the corresponding geographic coordinate system component CoordinateSystem: ' Geo ', data: [],//Mark size symbolsize:12, Showeffecton: ' Render ',    Rippleeffect: {brushtype: ' stroke '}, hoveranimation:true, Label: {normal: {show:false} }, ItemStyle: {normal: {color: ' #f4e925 ', shadowblur:10, Shadowcolor: ' #333 '}}, Zlev El: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: {' Hong Kong SAR ': [114.08, 22.2], ' Macau SAR ': [113.33, 22.13], ' Taipei ': [121.5, 25.03]/*, etc. */},//luminous City Showcitynumber:5, showcount:0,//Need 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     to 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: ' Region Heat ',        data:paledata       },       {        name: ' Top5 ',        data:lightdata       }]})}   )}}

At this point npm run Dev can already 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.showcitynumbe R + 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 ({E L: ' #app ', store, Template: ' <Index/> ', components: {Index}}) Vue.use (Chinamap)

Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

How PHP implements the stack data structure and the code example of the brace matching algorithm

The simplest string matching algorithm in PHP, PHP matching algorithm _php tutorial

The simplest tutorial for string matching algorithms in PHP