vue+vuex+axios+echarts画一个动态更新的中国地图的方法
发布时间：2020-12-17 02:40:12 所属栏目：百科 来源：网络整理
导读：本文介绍了vue+vuex+axios+echarts画一个动态更新的中国地图的方法，分享给大家，具体如下： 一. 生成项目及安装插件 二. 项目结构 三. 引入中国地图并绘制基本的图表 1.按需求引入与中国地图相关的Echarts图表和组件。 2.引入中国地图JS文件，会自动注册地
|
本文介绍了vue+vuex+axios+echarts画一个动态更新的中国地图的方法，分享给大家，具体如下： 一. 生成项目及安装插件二. 项目结构三. 引入中国地图并绘制基本的图表1.按需求引入与中国地图相关的Echarts图表和组件。 2.引入中国地图JS文件，会自动注册地图；也可以通过axios方式引入json文件，需要手动注册echarts.registerMap('china',chinaJson.data)。 3.准备一个有固定宽高的DOM容器并在mounted里面初始化一个echarts实例。 DOM容器 初始化echarts实例 4.设置初始化的空白地图，这里需要设置很多echarts参数，参考ECharts配置项手册。 四. 配置Vuex管理和分发数据1.在ChinaMap.js中引入vuex和axios。 2.设置必要的变量。 3.在actions中抓取后台数据并更新地图。 {
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下面加上： {
this.$store.dispatch('fetchHeatChinaRealData',chinaMap)
},1000)
在ChinaMap.js中actions的mutations中fetchHeatChinaRealData修改： {
return b.value - a.value
}).slice(0 + state.showCount,state.showCityNumber + state.showCount)
if (state.isLoading) {
chartsObj.hideLoading()
commit('closeLoading')
}
五. 其它1.别忘了在main.js里面引入Vuex。 let ChinaMap = new Vue({
el: '#app',store,template: ' }) Vue.use(ChinaMap) 2.案例代码 GitHub 3.效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
