本文介绍了vue+vuex+axios+echarts画一个动态更新的中国地图的方法，分享给大家，具体如下：
一. 生成项目及安装插件
二. 项目结构
文件
└── modules
└── ChinaMap.js # 中国地图Vuex模块
三. 引入中国地图并绘制基本的图表
1.按需求引入与中国地图相关的Echarts图表和组件。
提示框
require('echarts/lib/component/tooltip')
// 地图geo
require('echarts/lib/component/geo')
2.引入中国地图JS文件，会自动注册地图；也可以通过axios方式引入json文件，需要手动注册echarts.registerMap('china',chinaJson.data)。
文件
require('echarts/map/js/china')
3.准备一个有固定宽高的DOM容器并在mounted里面初始化一个echarts实例。
DOM容器
初始化echarts实例
4.设置初始化的空白地图，这里需要设置很多echarts参数，参考ECharts配置项手册。
标题
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'],// 地理坐标系组件
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',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。
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: '
})
el: '#app',store,template: '
})
Vue.use(ChinaMap)
2.案例代码
3.效果图
