So implementieren Sie die China-Karte in vue+vuex+axios+echarts

Dieser Artikel stellt hauptsächlich die Methode zum Zeichnen einer dynamisch aktualisierten Karte von China mit vue+vuex+axios+echarts vor. Es hat einen gewissen Referenzwert.

Dieser Artikel stellt mich gerne vor um Ihnen mitzuteilen, wie Sie eine dynamisch aktualisierte Karte von China mit vue+vuex+axios+echarts zeichnen können. Die Details sind wie folgt:

Generieren Sie das Projekt und installieren Sie das 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. Projektstruktur

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

3. Stellen Sie die China-Karte vor und zeichnen Sie grundlegende Diagramme

1. Stellen Sie Echarts vor bezogen auf die China-Karte nach Bedarf Diagramme und Komponenten.

// 主模块
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. Importieren Sie die China-Karten-JS-Datei, und die Karte wird automatisch registriert; Sie können die JSON-Datei auch über Axios einführen, und Sie müssen echarts.registerMap('china', chinaJson) manuell registrieren. Daten).

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

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

DOM-Container

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

Echarts-Instanz initialisieren

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

4. Hier müssen viele Echarts-Parameter festgelegt werden .

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. Konfigurieren Sie Vuex-Verwaltungs- und Verteilungsdaten

1. Führen Sie Vuex und Axios in ChinaMap.js ein.

import axios from 'axios'

2. Stellen Sie die erforderlichen Variablen ein.

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

3. Erfassen Sie Hintergrunddaten in Aktionen und aktualisieren Sie die Karte.

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 es so ändern möchten, dass es dynamisch angezeigt wird, können Sie es unter „mounted in index.vue“ hinzufügen:

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

Ändern Sie fetchHeatChinaRealData in den Mutationen von Aktionen in 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. Andere

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

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

GitHub

3. Rendering

Das Obige habe ich für Sie zusammengestellt Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So steuern Sie die Maus, um das Klicken auf die Schaltfläche in JS zu verweigern

So implementieren Sie eine schwebende Kollision in JS

Informationen zur Verwendung von bootstrap-table.js zur Implementierung der erweiterten Paging-Symbolleistenfunktion

Informationen zum Unterschied zwischen substring() und substr() (ausführlich Tutorial)

So ermitteln Sie, ob ein Variablenname in einem Array in JavaScript vorhanden ist

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die China-Karte in vue+vuex+axios+echarts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!