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

Today I will teach you a cool code, a sparkling map of China. You only need to use vue+vuex+axios+echarts to dynamically update this map. Let's take a look.

1. Generate project and install plug-in

# 安装vue-cli
npm install vue-cli -g
# 初始化项目
vue init webpack china-map
# 切到目录下
cd china-map
# 安装项目依赖
npm install
# 安装 vuex
npm install vuex --save
# 安装 axios
npm install axios --save
# 安装 ECharts
npm install echarts --save

2. Project structure

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

3. Introduce China map and draw basic charts

1. Press The demand is to introduce Echarts charts and components related to China maps.

// 主模块
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')
// 地图geo
require('echarts/lib/component/geo')

2. Introducing the China map JS file will automatically register the map; you can also introduce the json file through axios, and you need to manually register echarts.registerMap('china', chinaJson.data).

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

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

DOM container

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

Initialize echarts instance

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

4. Set the initialized blank map. You need to set many echarts parameters here. Please refer to the ECharts configuration item manual.

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

4. Configure Vuex management and distribution data

1.Introduce vuex and axios into 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. Grab background data and update the map in 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
       }
      ]
     })
    }
   )
 }
}

At this time npm run dev can already see the flashing yellow dots on the map of China.

If you want to change it to display dynamically, you can add under mounted in index.vue:

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

In actions in ChinaMap.js Modification of fetchHeatChinaRealData in mutations:

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. Others

1. Don’t forget to introduce Vuex in 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: &#39;<Index/>&#39;,
 components: {Index}
})
 
Vue.use(ChinaMap)

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

Detailed code examples of how to implement stack data structure and bracket matching algorithm in php

The most popular in php Simple string matching algorithm, php matching algorithm_PHP tutorial

The simplest string matching algorithm tutorial in php

The above is the detailed content of How to draw a dynamically updated map of China in a front-end project. For more information, please follow other related articles on the PHP Chinese website!