怎樣在前端項目裡畫出一個動態更新的中國地圖

今天教大家一份酷炫的代碼，閃閃發光的中國地圖。只需要用到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)

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

php如何?棧資料結構以及括弧匹配演算法的程式碼範例詳解

php中最簡單的字串匹配演算法，php匹配演算法_PHP教程

最簡單的php中字串匹配演算法教程