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
2. China-Karte vorstellen und grundlegende Diagramme zeichnen
├── index.html ├── main.js ├── components │ └── index.vue └── store ├── index.js # 组装模块及导出store的文件 └── modules └── ChinaMap.js # 中国地图Vuex模块
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')
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')
Echarts-Instanz initialisieren
<template> <div id="china-map"></div> </template>
4. Hier müssen viele Echarts-Parameter festgelegt werden Handbuch für ECharts-Konfigurationselemente.
let chinaMap = echarts.init(document.getElementById('china-map'))
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. Vuex-Verwaltungs- und Verteilungsdaten konfigurieren
2. Stellen Sie die erforderlichen Variablen ein.
import axios from 'axios'
3. Erfassen Sie Hintergrunddaten und aktualisieren Sie die Karte in
Aktionenconst state = { geoCoordMap: {'香港特别行政区': [114.08, 22.2], '澳门特别行政区': [113.33, 22.13], '台北': [121.5, 25.03]/*等等*/}, // 发光的城市 showCityNumber: 5, showCount: 0, // 是否需要loading isLoading: true }
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 } ] }) } ) } }
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('openLoading') this.$store.dispatch('fetchHeatChinaRealData', chinaMap) setInterval(() => { this.$store.dispatch('fetchHeatChinaRealData', chinaMap) }, 1000)
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('closeLoading') }
5. Andere
import Vue from 'vue' import Index from './components/index.vue' import store from './store/index' let ChinaMap = new Vue({ el: '#app', store, template: '<Index/>', components: {Index} }) Vue.use(ChinaMap)
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!