在vue中使用echarts和datav实现一个地图功能

　　介绍

这篇文章给大家介绍在vue中使用echarts和datav实现一个地图功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢。

大屏展示其实就是一堆的图表能够让人一目了然地看到该系统下的一些基本数据信息的汇总,也会有一些实时数据刷新,信息预警之类的。笔者在之前也做过一些大屏类的数据展示,但是由于都是一些图表类的,觉得没什么可说的,加之数据也都牵扯到公司,所以没有沉淀下来什么。

最近有朋友要做一个大的屏,问了自己一个问题,自己也刚好做了一个简单的大屏数据展示,趁此机会做一个小总结。

先看一下效果:

在vue中使用echarts和datav实现一个地图功能

由于数据牵扯到公司内部信息,所以将一些复杂的切换逻辑都去掉类,但保留了一些数据间但相互联动。

项目采用的是vue + Echanrts + datav写的,结构目录如下:

在vue中使用echarts和datav实现一个地图功能

由于只是一个单一页面,数据处理也不是复杂,没有涉及到路由器和vuex,从结构目录上看就是一个很典型的vue-cli项目,在之前我也讲过关于vue-cli项目的一些操作和目录结构解释,这里就不做多做说明了,在文章最后会提供该项目的源码地址库。

大屏主要的炫酷效果本人引用的是datav组件,地址:http://datav.jiaminghi.com/,这简直就是数据可视化的一款神器,神奇之处我就不多说了,大家可以自己去它的网站上自行体会。它也提供了如何在vue中使用该组件。

datav可以全局注入,也可以按需注入,本人省事就直接在主。js中进行了全局注入。

在vue中使用echarts和datav实现一个地图功能

所有的页面代码都放在了视图文件目录下:

在vue中使用echarts和datav实现一个地图功能

其中index.vue文件为主文件入口,其他都是其子组件,组件名称以方位的形式命名,如centerForm。vue就是中间的表单控件。

本项目引入了中国地图并实现省市县下钻,最初采用的是阿里旗下的高德地图,后来因为种种原因改为了百度提供的Echarts来实现,但两种使用方法都保留了下来,大家可以根据自己的需求进行选择。

其中Echarts中国地图的代码如下:

& lt; template> 　　& lt; div id=癱hina_map_box"祝辞 　　& lt; el-button类型=皃rimary"大?癿ini"类=癰ack"@click=癰ack"v=癲eepTree。长度比;1“祝辞返回& lt;/el-button> 　　& lt; div类=癳charts"祝辞 　　& lt; div id=癿ap"祝辞& lt;/div> 　　& lt;/div> 　　& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　 　　进口{getChinaJson、getProvinceJSON getCityJSON}从“. ./api/get-json"; 　　从& # 39;进口{cityProvincesMap} . ./config/cityProvincesMap& # 39; 　　从& # 39;进口{mapOption} . ./config/mapOption& # 39; 　　 　　 　　出口默认{ 　　名称:“china", 　　组件:{}, 　　数据(){ 　　返回{ 　　图:null,//实例化echarts 　　provincesMap: cityProvincesMap。provincesMap,//省拼音,用于查找对应json 　　provincesCode: cityProvincesMap。provincesCode,//市行政区划,用于查找对应json 　　areaMap: cityProvincesMap。areaMap,//省行政区划,用于数据的查找,按行政区划查数据 　　特殊:[“北京市“,“天津市“,“上海市“,“重庆市“,“香港“,“澳门“),//直辖市和特别行政区——只有二级地图,没有三级地图 　　mapData:[],//当前地图上的地区 　　选择:{…mapOption。basicOption},//地图的相关配置 　　deepTree:[],//点击地图时,点返回时流行 　　areaName: & # 39;中国& # 39;,//当前地名 　　areaCode中:& # 39;000000 & # 39;//当前行政区划 　　areaLevel: & # 39;增长# 39;//当前级别 　　} 　　}, 　　安装(){ 　　美元。nextTick(()=比;｛ 　　this.initEcharts (); 　　this.chart.on(& # 39;点击# 39;,this.echartsMapClick); 　　}); 　　}, 　　方法:{//初次加载绘制地图 　　initEcharts () {//地图容器 　　这一点。图=charts.init美元(. getelementbyid(& # 39;地图# 39;)); 　　如果这一点。areaCode中===& # 39;000000 & # 39;){ 　　this.requestGetChinaJson (); 　　其他}{ 　　这一点。requestGetProvinceJSON ({areaName:这个。areaName areaCode中:this.areaCode}) 　　} 　　},//地图点击 　　echartsMapClick (params) {//console.log (params); 　　这一点。areaName=params.areaName; 　　如果(this.provincesMap params.name) { 　　这一点。areaCode中=params.data.areaCode; 　　这一点。areaLevel=params.data.areaLevel;//如果点击的是34个省,市,自治区,绘制选中地区的二级地图 　　this.requestGetProvinceJSON (params.data); 　　}如果参数个数。seriesName this.provincesMap) {//如果是【直辖市/特别行政区】只有二级下钻 　　如果(this.special.indexOf (params.seriesName)在=0){ 　　返回; 　　其他}{ 　　这一点。areaCode中=this.areaMap [params.name]; 　　这一点。areaLevel=params.data.areaLevel;//显示县级地图 　　this.requestGetCityJSON (params.data) 　　} 　　其他}{ 　　返回; 　　} 　　美元。排放(& # 39;map-change& # 39;, params.data); 　　},//绘制全国地图 　　requestGetChinaJson () { 　　getChinaJson ()。然后(res=比;｛ 　　让arr=[]; 　　(让我=0;我& lt;res.features.length;我+ +){ 　　让obj={ 　　名称:res.features[我].properties.name, 　　areaName: res.features[我].properties.name, 　　areaCode中:res.features[我].id, 　　areaLevel: & # 39;省# 39; 　　价值:Math.round (math . random ()), 　　}; 　　arr.push (obj) 　　} 　　这一点。mapData=arr; 　　this.deepTree.push ({ 　　mapData:加勒比海盗, 　　参数:{名称:& # 39;中国# 39;,areaName: & # 39;中国# 39;,areaLevel: & # 39;增长# 39;,areaCode中:& # 39;000000 & # 39;} 　　});//注册地图 　　美元。echarts.registerMap(& # 39;中国# 39;,res);//绘制地图 　　this.renderMap(& # 39;中国# 39;,arr); 　　}); 　　},//加载省级地图 　　requestGetProvinceJSON (params) { 　　getProvinceJSON (params.areaCode)。然后(res=比;｛ 　　echarts.registerMap美元(参数。areaName, res); 　　让arr=[]; 　　(让我=0;我& lt;res.features.length;我+ +){ 　　让obj={ 　　名称:res.features[我].properties.name, 　　areaName: res.features[我].properties.name, 　　areaCode中:res.features[我].id, 　　areaLevel: & # 39;城市# 39; 　　价值:Math.round (math . random ()), 　　}; 　　arr.push (obj) 　　} 　　这一点。mapData=arr; 　　this.deepTree.push ({ 　　mapData:加勒比海盗, 　　参数:参数, 　　}); 　　this.renderMap(参数。areaName arr); 　　}); 　　},//加载市级地图 　　requestGetCityJSON (params) { 　　这一点。areaLevel=params.areaLevel; 　　getCityJSON (params.areaCode)。然后(res=比;｛ 　　echarts.registerMap美元(参数。areaName, res); 　　让arr=[]; 　　(让我=0;null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

在vue中使用echarts和datav实现一个地图功能