So zeichnen Sie eine dynamisch aktualisierte Karte von China in einem Front-End-Projekt

php中世界最好的语言
Freigeben: 2023-03-18 06:34:01
Original
3309 Leute haben es durchsucht

Heute werde ich dir einen coolen Code beibringen, eine funkelnde Karte von China. Sie müssen nur vue+vuex+axios+echarts verwenden, um diese Karte dynamisch zu aktualisieren.

1. Projekt erstellen und Plug-in installieren

# 安装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
Nach dem Login kopieren

2. China-Karte vorstellen und grundlegende Diagramme zeichnen

├── index.html
├── main.js
├── components
│  └── index.vue
└── store
  ├── index.js     # 组装模块及导出store的文件
  └── modules
    └── ChinaMap.js  # 中国地图Vuex模块
Nach dem Login kopieren
1. Stellen Sie nach Bedarf Echarts-Diagramme und -Komponenten im Zusammenhang mit China-Karten vor.

2. Importieren Sie die JS-Datei der China-Karte. Die Karte wird automatisch registriert. Sie können die JSON-Datei auch über axios einführen. Sie müssen echarts.registerMap('china', chinaJson.data).

// 主模块
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')
Nach dem Login kopieren

3. Bereiten Sie einen DOM-Container mit fester Breite und Höhe vor und initialisieren Sie eine Echarts-Instanz im gemounteten Zustand.

// 中国地图JS文件
require('echarts/map/js/china')
Nach dem Login kopieren
DOM-Container

Echarts-Instanz initialisieren

<template>
 <div id="china-map"></div>
</template>
Nach dem Login kopieren

4. Hier müssen viele Echarts-Parameter festgelegt werden Handbuch für ECharts-Konfigurationselemente.

let chinaMap = echarts.init(document.getElementById(&#39;china-map&#39;))
Nach dem Login kopieren

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
   }
  ]
 })
Nach dem Login kopieren

4. Vuex-Verwaltungs- und Verteilungsdaten konfigurieren

1. Vuex und Axios in ChinaMap.js einführen.

2. Stellen Sie die erforderlichen Variablen ein.

import axios from &#39;axios&#39;
Nach dem Login kopieren

3. Erfassen Sie Hintergrunddaten und aktualisieren Sie die Karte in

Aktionen
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
}
Nach dem Login kopieren
s.

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
       }
      ]
     })
    }
   )
 }
}
Nach dem Login kopieren

Zu diesem Zeitpunkt kann npm run dev bereits die blinkenden gelben Punkte auf der Karte von China sehen.

Wenn Sie die Anzeige dynamisch ändern möchten, können Sie unten in index.vue Folgendes hinzufügen:

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)
Nach dem Login kopieren

in ChinaMap. js Modifikation von fetchHeatChinaRealData in den Mutationen von Aktionen:

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;)
}
Nach dem Login kopieren

5. Andere

1. Vergessen Sie nicht, Vuex in main.js einzuführen .

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)
Nach dem Login kopieren
Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Detailliertes Codebeispiel, wie PHP die Stack-Datenstruktur und den Bracket-Matching-Algorithmus implementiert


Am beliebtesten Code in PHP Einfacher String-Matching-Algorithmus, PHP-Matching-Algorithmus_PHP-Tutorial


Das einfachste Tutorial für String-Matching-Algorithmen in PHP


Das obige ist der detaillierte Inhalt vonSo zeichnen Sie eine dynamisch aktualisierte Karte von China in einem Front-End-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage