Comment dessiner une carte de la Chine mise à jour dynamiquement dans un projet frontal

php中世界最好的语言
Libérer: 2023-03-18 06:34:01
original
3292 Les gens l'ont consulté

Aujourd'hui, je vais vous apprendre un code sympa, une carte étincelante de la Chine. Il vous suffit d'utiliser vue+vuex+axios+echarts pour mettre à jour dynamiquement cette carte.

1. Générer un projet et installer 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
Copier après la connexion

2. Structure du projet

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

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

1. Présentez les graphiques Echarts et les composants liés aux cartes de la Chine, selon les besoins.

// 主模块
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')
Copier après la connexion

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')
Copier après la connexion

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

Conteneur DOM

<template>
 <div id="china-map"></div>
</template>
Copier après la connexion

Initialiser l'instance echarts

let chinaMap = echarts.init(document.getElementById(&#39;china-map&#39;))
Copier après la connexion

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: &#39;#272D3A&#39;,
  // 标题
  title: {
   text: &#39;中国地图闪闪发光&#39;,
   left: &#39;center&#39;,
   textStyle: {
    color: &#39;#fff&#39;
   }
  },
  // 地图上圆点的提示
  tooltip: {
   trigger: &#39;item&#39;,
   formatter: function (params) {
    return params.name + &#39; : &#39; + params.value[2]
   }
  },
  // 图例按钮 点击可选择哪些不显示
  legend: {
   orient: &#39;vertical&#39;,
   left: &#39;left&#39;,
   top: &#39;bottom&#39;,
   data: [&#39;地区热度&#39;, &#39;top5&#39;],
   textStyle: {
    color: &#39;#fff&#39;
   }
  },
  // 地理坐标系组件
  geo: {
   map: &#39;china&#39;,
   label: {
    // true会显示城市名
    emphasis: {
     show: false
    }
   },
   itemStyle: {
    // 地图背景色
    normal: {
     areaColor: &#39;#465471&#39;,
     borderColor: &#39;#282F3C&#39;
    },
    // 悬浮时
    emphasis: {
     areaColor: &#39;#8796B4&#39;
    }
   }
  },
  // 系列列表
  series: [
   {
    name: &#39;地区热度&#39;,
    // 表的类型 这里是散点
    type: &#39;scatter&#39;,
    // 使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件
    coordinateSystem: &#39;geo&#39;,
    data: [],
    // 标记的大小
    symbolSize: 12,
    // 鼠标悬浮的时候在圆点上显示数值
    label: {
     normal: {
      show: false
     },
     emphasis: {
      show: false
     }
    },
    itemStyle: {
     normal: {
      color: &#39;#ddb926&#39;
     },
     // 鼠标悬浮的时候圆点样式变化
     emphasis: {
      borderColor: &#39;#fff&#39;,
      borderWidth: 1
     }
    }
   },
   {
    name: &#39;top5&#39;,
    // 表的类型 这里是散点
    type: &#39;effectScatter&#39;,
    // 使用地理坐标系,通过 geoIndex 指定相应的地理坐标系组件
    coordinateSystem: &#39;geo&#39;,
    data: [],
    // 标记的大小
    symbolSize: 12,
    showEffectOn: &#39;render&#39;,
    rippleEffect: {
     brushType: &#39;stroke&#39;
    },
    hoverAnimation: true,
    label: {
     normal: {
      show: false
     }
    },
    itemStyle: {
     normal: {
      color: &#39;#f4e925&#39;,
      shadowBlur: 10,
      shadowColor: &#39;#333&#39;
     }
    },
    zlevel: 1
   }
  ]
 })
Copier après la connexion


4. Configurer les données de gestion et de distribution de Vuex

1. Introduisez vuex et axios dans ChinaMap.js.

import axios from &#39;axios&#39;
Copier après la connexion

2. Définissez les variables nécessaires.

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

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

const actions = {
 fetchHeatChinaRealData ({state, commit}, chartsObj) {
  axios.get(&#39;static/data/heatChinaRealData.json&#39;)
   .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: &#39;地区热度&#39;,
        data: paleData
       },
       {
        name: &#39;top5&#39;,
        data: lightData
       }
      ]
     })
    }
   )
 }
}
Copier après la connexion


À 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 ci-dessous monté dans index.vue :

chinaMap.showLoading(showLoadingDefault)
this.$store.commit(&#39;openLoading&#39;)
this.$store.dispatch(&#39;fetchHeatChinaRealData&#39;, chinaMap)
setInterval(() => {
  this.$store.dispatch(&#39;fetchHeatChinaRealData&#39;, chinaMap)
}, 1000)
Copier après la connexion


dans ChinaMap. js Modification de fetchHeatChinaRealData dans les mutations d'actions :

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(&#39;closeLoading&#39;)
}
Copier après la connexion


5. Autres

1. N'oubliez pas d'introduire Vuex dans main.js. .

import Vue from &#39;vue&#39;
import Index from &#39;./components/index.vue&#39;
import store from &#39;./store/index&#39;
let ChinaMap = new Vue({
 el: &#39;#app&#39;,
 store,
 template: &#39;<Index/>&#39;,
 components: {Index}
})
 
Vue.use(ChinaMap)
Copier après la connexion

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Exemple de code détaillé de la façon dont PHP implémente la structure de données de pile et l'algorithme de correspondance entre crochets

Le plus populaire code en PHP Algorithme de correspondance de chaînes simple, algorithme de correspondance php_Tutoriel PHP

Le didacticiel d'algorithme de correspondance de chaînes le plus simple en php


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal