如何实现Vue ECharts Datav大屏上中国地图省市县的动态数据展示？

本文共计2791个文字，预计阅读时间需要12分钟。

随着前端技术的飞速发展，大数据时代的到来，我们在开发项目中越来越频繁地接到客户需求，要求制作一个数据展示的大屏幕，以便直观地观察用户所需的数据。同时，炫酷的界面也会给客户留下深刻印象。

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

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

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

先看一下效果：

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

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

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