vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能

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

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

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

先看一下

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

项目采用的是Vue+Echanrts+datav写的，结构目录如下：

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

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

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

所有的页面代码都放在了views文件目录下：

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

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

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

  <div id="china_map_box">  1">返回<div class="echarts"> <div id="map"></div></div></div> #china_map_box { display: flex; width: 100%; height: 100%; position: relative; .echarts { width: 0; flex: 1; background-size: 100% 100%; #map { height: 100%; } } .back { position: absolute; top: .8rem; right: .5rem; z-index: 999; padding-left: .12rem; padding-right: .12rem; } } 

在调用省市地图时本人采用的是将地图信息的json存放在了本地，这是由于本人的项目中很多地市的行政区划很多需要变动，这也是放弃高德地图的原因之一。json文件放在了public文件目录下，如下图：

里面有一些自己没用到的json数据本人进行了删除，关于中国详细的json数据大家可以去https://datav.aliyun.com/tools/atlas/下载，内容由高德开放平台提供。

高德地图chinaGaode.vue代码如下：

  <div id="china_map_box"> 返回<div class="map"> </div><div class="echarts"> <div id="map"></div></div></div> #china_map_box { display: flex; width: 100%; height: 100%; position: relative; .echarts { width: 0; flex: 1; background-size: 100% 100%; #map { height: 100%; } } .back { position: absolute; top: .8rem; right: .5rem; z-index: 999; } } 

在网上有很多下伙伴都在查找如何使用中国地图并实现下钻，在实际使用地图时其实并不难，以上是本人提供的一些解决方案和代码提供。

由于代码是从本人的一个项目中剥离而来，代码的质量可能欠佳，有些逻辑处理和傅子组件间的数据联动也都有所减少，但并不影响该项目demo的使用，如果有需要大本文来源gao*daima.com搞@代#码&网6家可以去以下地址下载源码学习，也欢迎star。

gitee源码地址：https://gitee.com/vijtor/vue-map-datav