vue+vuex+axios+echarts画一个动态更新的中国地图的方(2)
四. 配置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.效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。