vue+vuex+axios+echarts畫一個動態更新的中國地圖的方法

2019-11-19 14:41:30

字體：大中小

來源：轉載

供稿：網友

本文介紹了vue+vuex+axios+echarts畫一個動態更新的中國地圖的方法，分享給大家，具體如下：

一. 生成項目及安裝插件

# 安裝vue-clinpm install vue-cli -g# 初始化項目vue init webpack china-map# 切到目錄下cd china-map# 安裝項目依賴npm install# 安裝 vuexnpm install vuex --save# 安裝 axiosnpm install axios --save# 安裝 EChartsnpm install echarts --save

二. 項目結構

├── index.html├── main.js├── components│  └── index.vue└── store  ├── index.js     # 組裝模塊及導出store的文件  └── modules    └── ChinaMap.js  # 中國地圖Vuex模塊

三. 引入中國地圖并繪制基本的圖表

1.按需求引入與中國地圖相關的Echarts圖表和組件。

// 主模塊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')// 地圖georequire('echarts/lib/component/geo')

2.引入中國地圖JS文件，會自動注冊地圖；也可以通過axios方式引入json文件，需要手動注冊echarts.registerMap('china', chinaJson.data)。

// 中國地圖JS文件require('echarts/map/js/china')

3.準備一個有固定寬高的DOM容器并在mounted里面初始化一個echarts實例。

DOM容器

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

初始化echarts實例

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

4.設置初始化的空白地圖，這里需要設置很多echarts參數，參考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   }  ] })

四. 配置Vuex管理和分發數據

1.在ChinaMap.js中引入vuex和axios。

import axios from 'axios'

2.設置必要的變量。

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

3.在actions中抓取后臺數據并更新地圖。

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

此時npm run dev已經可以看到中國地圖上閃閃的黃色小點點。

若想改變她使動態展示，可以在index.vue中mounted下面加上：

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

在ChinaMap.js中actions的mutations中fetchHeatChinaRealData修改：

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

五. 其它

1.別忘了在main.js里面引入Vuex。

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)

2.案例代碼

GitHub

3.效果圖