Vue+Vuex+Axios+ECharts绘制动态更新的中国地图

1.生成项目安装插件#安装Vueclinpminstallvue-cli-g#初始化项目vueinitwebpackvue-china-map#切到目录cdvue-china-map#安装项目依赖npminstall#安装Vuexnpminstallvuex--save#安装Axiosnpminstallaxios--save#安装EChartsnpminstallecharts--save2.项目结构├──index.html├──main.js├──components│└──index.vue└──store├──index.js#组装模块并导出`store`文件└──modules└──ChinaMap.js#中文地图Vuex模块3.导入地图中国地图及基础图表绘制3.1根据需要引入ECharts图表及中国地图相关组件。//主模块letecharts=require('echarts/lib/echarts')//散点图require('echarts/lib/chart/scatter')//散点图放大require('echarts/lib/chart/effectScatter')//maprequire('echarts/lib/chart/map')//legendrequire('echarts/lib/component/legend')//提示框require('echarts/lib/component/tooltip')//MapGEOrequire('echarts/lib/component/geo')3.2导入中国地图JavaScript文件，地图会自动注册；也可以通过axios导入json文件，需要手动注册echarts.registerMap('china',chinaJson.data)。//中国地图JavaScript文件require('echarts/map/js/china')3.3准备一个固定宽高的DOM容器，在mounted中初始化一个ECharts实例。DOM容器：初始化ECharts实例：letchinaMap=echarts.init(document.getElementById('china-map'))3.4设置初始化空白图，这里需要设置很多ECharts参数，参考ECharts配置项手册。chinaMap.setOption({backgroundColor:'#272D3A',//titletitle:{text:'中国地图闪闪发光',left:'center',textStyle:{color:'#fff'}},//地图上的圆形tooltip:{trigger:'item',formatter:function(params){returnparams.name+':'+params.value[2];}},//图例按钮，点击选择哪些不显示图例：{orient:'vertical',left:'left',top:'bottom',data:['区域热度','top5'],textStyle:{color:'#fff'}},//地理坐标系组件geo:{map:'china',label:{//`true`会显示城市名称emphasis:{show:false}},itemStyle:{//地图背景色normal:{Colororderb,1#areaColor:7':'#282F3C'},//悬停时强调：{areaColor:'#8796B4'}}}},//系列列表series:[type{name:'RegionalHeat',//表格类型，这里是一个散点:'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',//tabletype,这里是scatter'e//fftype:Use地理坐标系，通过`geoIndex`指定对应的地理坐标系组件coordinateSystem:'geo',data:[],//标记大小symbolSize:12,showEffectOn:'render',rippleEffect:{brushType:'stroke'},HOVERANIMATION:TRUE,标签:{Normal:{show:false}},itemstyle:{normal:{color:'#f4e925',shadowblur:10,shadowcolor:'#333'}},zlevel:1}])四、配置Vuex管理和分发数据4.1将Vuex和axios引入ChinaMap.jsimportaxiosfrom'axios'4.2设置必要的变量。conststate={geoCoordMap:{'香港特别行政区':[114.08,22.2],'澳门特别行政区':[113.33,22.13],'台北':[121.5,25.03]/*etc.*/},//发光的城市showCityNumber:5,showCount:0,//是否需要加载？isLoading:true}4.3抓取背景数据并在动作中更新地图。constactions={fetchHeatChinaRealData({state,commit},chartsObj){axios.get('static/data/heatChinaRealData.json').then((res)=>{letdata=res.dataletpaleData=((state,data)=>{letarr=[]letlen=data.lengthwhile(len--){letgeoCoord=state.geoCoordMap[data[len].name]if(geoCoord){arr.push({name:data[len].name,value:geoCoord.concat(data[len].value)})}}returnarr})(state,data)letlightData=paleData.sort((a,b)=>{返回b.value-a.value}).slice(0,state.showCityNumber)chartsObj.setOption({series:[{name:'地区热点',data:paleData},{name:'top5',data:lightData}]})})}}这时候npmrundev已经可以看到中国地图上闪亮的黄色圆点了。如果想把她改成动态显示，可以在index.vue中mounted下添加：chinaMap.showLoading(showLoadingDefault)this.$store.commit('openLoading')this.$store.dispatch('fetchHeatChinaRealData',chinaMap)setInterval(()=>{this.$store.dispatch('fetchHeatChinaRealData',chinaMap)},1000)在ChinaMap.js的动作突变中修改fetchHeatChinaRealData:letlightData=paleData.sort((a,b)=>{returnb.value-a.value}).slice(0+state.showCount,state.showCityNumber+state.showCount)if(state.isLoading){chartsObj.hideLoading()commit('closeLoading')}5.其他5.1不要忘记在main.js中引入Vuex。importVuefrom'vue'importIndexfrom'./components/index.vue'importstorefrom'./store/index'letChinaMap=newVue({el:'#app',store,template:'',components:{Index}})Vue.use(ChinaMap)5.2案例代码GitHub:https://github.com/mazeyqian/vue-china-map版权声明本博客所有原创文章均由作者保留。转载必须包含此声明，保持本文完整，并以超链接的形式注明作者及本文原文地址：https://blog.mazey.net/794.html（完）