Comment implémenter la carte de la Chine dans vue+vuex+axios+echarts

Cet article présente principalement la méthode de dessin d'une carte de la Chine mise à jour dynamiquement avec vue+vuex+axios+echarts. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Cet article présente ce que j'aimerais. pour partager avec vous comment dessiner une carte de la Chine mise à jour dynamiquement avec vue+vuex+axios+echarts Les détails sont les suivants :

1. Générez le projet et installez le 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. Structure du projet

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

3. Présenter la carte de la Chine et dessiner des graphiques de base

1. Présenter et communiquer avec la Chine, selon les besoins, les graphiques et composants Echarts liés à la carte.

// 主模块
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. Importez le fichier JS de la carte de Chine et la carte sera automatiquement enregistrée ; vous pouvez également introduire le fichier json via axios, et vous devez enregistrer manuellement echarts.registerMap('china', chinaJson.data).

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

3. Préparez un conteneur DOM avec une largeur et une hauteur fixes et initialisez une instance echarts montée.

Conteneur DOM

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

Initialiser l'instance echarts

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

4. Définissez la carte vierge initialisée. De nombreux paramètres echarts doivent être définis ici. Manuel des éléments de configuration ECharts.

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. Configurer les données de gestion et de distribution de Vuex

1. Introduisez vuex et axios dans ChinaMap.js.

import axios from 'axios'

2. Définissez les variables nécessaires.

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

3. Capturez les données d'arrière-plan dans les actions et mettez à jour la carte.

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

À ce moment-là, npm run dev peut déjà voir les points jaunes clignotants sur la carte de la Chine.

Si vous souhaitez le modifier pour l'afficher dynamiquement, vous pouvez ajouter sous monté dans index.vue :

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

Modifier fetchHeatChinaRealData dans les mutations d'actions dans 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')
}

5. Autres

1. N'oubliez pas d'introduire Vuex dans 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)

2. Code du cas

GitHub

3. Rendu

Ce qui précède est ce que j'ai compilé. Tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment contrôler la souris pour refuser de cliquer sur le bouton en JS

Comment implémenter une collision flottante en JS

À propos de l'utilisation de bootstrap-table.js pour implémenter la fonction de barre d'outils de pagination étendue

À propos de la différence entre substring() et substr() (détail tutoriel)

Comment déterminer si un nom de variable existe dans un tableau en JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!