随着前端技术的飞速发展，大数据时代的来临，我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏，可以直观的展示用户想要的数据，同时炫酷的界面也会深受客户的喜欢。
大屏展示其实就是一堆的图表能够让人一目了然地看到该系统下的一些基本数据信息的汇总，也会有一些实时数据刷新，信息预警之类的。笔者在之前也做过一些大屏类的数据展示，但是由于都是一些图表类的，觉得没什么可说的，加之数据也都牵扯到公司，所以没有沉淀下来什么。
最近有朋友要做一个大屏，问了自己一个问题，自己也刚好做了一个简单的大屏数据展示，趁此机会做一个小总结。
先看一下效果：
由于数据牵扯到公司内部信息，所以将一些复杂的切换逻辑都去掉类，但保留了一些数据间但相互联动。
项目采用的是Vue+Echanrts+datav写的，结构目录如下：
由于只是一个单一页面，数据处理也不是复杂，没有涉及到router和vuex，从结构目录上看就是一个很典型的vue-cli项目，在之前我也讲过关于vue-cli项目的一些操作和目录结构解释，这里就不做多做说明了，在文章最后会提供该项目的源码地址库。
大屏主要的炫酷效果本人引用的是datav组件，地址：,这简直就是数据可视化的一款神器，神奇之处我就不多说了，大家可以自己去它的网站上自行体会。它也提供了如何在vue 中使用该组件。
datav可以全局注入，也可以按需注入，本人省事就直接在main.js中进行了全局注入。
所有的页面代码都放在了views文件目录下：
其中index.vue文件为主文件入口，其他都是其子组件，组件名称以方位的形式命名，如centerForm.vue就是中间的表单控件。
本项目引入了中国地图并实现省市县下钻，最初采用的是阿里旗下的高德地图，后来因为种种原因改为了百度提供的Echarts来实现，但两种使用方法都保留了下来，大家可以根据自己的需求进行选择。
其中Echarts中国地图的代码如下：
<template> <div> <el-button type="primary" size="mini" @click="back" v-if="deepTree.length > 1">返回</el-button> <div> <div></div> </div> </div> </template> <script> import {getChinaJson, getProvinceJSON, getCityJSON} from "../api/get-json"; import {cityProvincesMap} from '../config/cityProvincesMap' import {mapOption} from '../config/mapOption' export default { name: "china", components: {}, data() { return { chart: null, // 实例化echarts provincesMap: cityProvincesMap.provincesMap, // 省拼音，用于查找对应json provincesCode: cityProvincesMap.provincesCode, // 市行政区划，用于查找对应json areaMap: cityProvincesMap.areaMap, // 省行政区划，用于数据的查找，按行政区划查数据 special: ["北京市", "天津市", "上海市", "重庆市", "香港", "澳门"],//直辖市和特别行政区-只有二级地图，没有三级地图 mapData: [], // 当前地图上的地区 option: {...mapOption.basicOption}, // map的相关配置 deepTree: [],// 点击地图时push，点返回时pop areaName: '中国', // 当前地名 areaCode: '000000', // 当前行政区划 areaLevel: 'country', // 当前级别 } }, mounted() { this.$nextTick(() => { this.initEcharts(); this.chart.on('click', this.echartsMapClick); }); }, methods: { // 初次加载绘制地图 initEcharts() { //地图容器 this.chart = this.$echarts.init(document.getElementById('map')); if (this.areaCode === '000000') { this.requestGetChinaJson(); } else { this.requestGetProvinceJSON({areaName: this.areaName, areaCode: this.areaCode}) } }, // 地图点击 echartsMapClick(params) { // console.log(params); this.areaName = params.areaName; if (params.name in this.provincesMap) { this.areaCode = params.data.areaCode; this.areaLevel = params.data.areaLevel; //如果点击的是34个省、市、自治区，绘制选中地区的二级地图 this.requestGetProvinceJSON(params.data); } else if (params.seriesName in this.provincesMap) { //如果是【直辖市/特别行政区】只有二级下钻 if (this.special.indexOf(params.seriesName) >= 0) { return; } else { this.areaCode = this.areaMap[params.name]; this.areaLevel = params.data.areaLevel; //显示县级地图 this.requestGetCityJSON(params.data) } } else { return; } this.$emit('map-change', params.data); }, //绘制全国地图 requestGetChinaJson() { getChinaJson().then(res => { let arr = []; for (let i = 0; i < res.features.length; i++) { let obj = { name: res.features[i].properties.name, areaName: res.features[i].properties.name, areaCode: res.features[i].id, areaLevel: 'province', value: Math.round(Math.random()), }; arr.push(obj) } this.mapData = arr; this.deepTree.push({ mapData: arr, params: {name: 'china', areaName: 'china', areaLevel: 'country', areaCode: '000000'} }); //注册地图 this.$echarts.registerMap('china', res); //绘制地图 this.renderMap('china', arr); }); }, // 加载省级地图 requestGetProvinceJSON(params) { getProvinceJSON(params.areaCode).then(res => { this.$echarts.registerMap(params.areaName, res); let arr = []; for (let i = 0; i < res.features.length; i++) { let obj = { name: res.features[i].properties.name, areaName: res.features[i].properties.name, areaCode: res.features[i].id, areaLevel: 'city', value: Math.round(Math.random()), }; arr.push(obj) } this.mapData = arr; this.deepTree.push({ mapData: arr, params: params, }); this.renderMap(params.areaName, arr); }); }, // 加载市级地图 requestGetCityJSON(params) { this.areaLevel = params.areaLevel; getCityJSON(params.areaCode).then(res => { this.$echarts.registerMap(params.areaName, res); let arr = []; for (let i = 0; i < res.features.length; i++) { let obj = { name: res.features[i].properties.name, areaName: res.features[i].properties.areaName, areaCode: res.features[i].id, areaLevel: 'districts', value: Math.round(Math.random()), }; arr.push(obj) } this.mapData = arr; this.deepTree.push({mapData: arr, params: params}); this.renderMap(params.areaName, arr); }) }, renderMap(map, data) { this.option.series = [ { name: map, mapType: map, ...mapOption.seriesOption, data: data } ]; //渲染地图 this.chart.setOption(this.option); }, // 返回 back() { // console.log(this.deepTree); if (this.deepTree.length > 1) { this.deepTree.pop(); let areaName = this.deepTree[this.deepTree.length - 1].params.areaName; let mapData = this.deepTree[this.deepTree.length - 1].mapData; this.$emit('back-change', this.deepTree[this.deepTree.length - 1].params); this.renderMap(areaName, mapData); } } } } </script> <style lang="scss" scoped> #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; } } </style>