引入数据大屏相关组件
用Datav插件做大屏可视化的组件，官网地址 http://datav.jiaminghi.com/ ，整个组件库都是基于Vue React版本实现，主要用于构建大屏数据可视化页面，具有很多种类的组件可以使用。其安装方式如下。
npm install @jiaminghi/data-view
全屏容器介绍
数据可视化页面一般是在浏览器中进行全屏的展示，全屏容器会根据当前的浏览器屏幕窗口大小自动的进行缩放处理，在浏览器全屏之后，整个的全屏容器就会充满全屏。注意在使用之前请将body的margin属性设置为0。Vue中引入代码如下
<template> <div id="index"> <dv-full-screen-container> 数据可视化 </dv-full-screen-container> </div> </template>
Loading加载效果
在数据没有加载完成之前，页面应该处于一个数据加载的状态，这个状态就是由我们的loading组件来实现的。我们可以通过条件判断来引入一个数据加载的组件，当数据加载完成之后，显示数据大屏的组件。
<template> <div id="index"> <dv-loading v-if="loading">数据加载中……</dv-loading> <dv-full-screen-container v-else> 数据可视化 </dv-full-screen-container> </div> </template> <script> export default { data() { return { loading: true } }, mounted(){ this.cancelLoading(); }, methods:{ cancelLoading(){ setTimeout(() => { this.loading = false; }, 1000); } } } </script>
边框元素
在数据可视化大屏上，我们会看到很多的绚丽多彩的边框，在DataV组件中，这些边框都是有SVG元素来进行绘制，默认的组件宽高全部是100%。
dv-border-Box-1
<template> <div id="index"> <dv-full-screen-container class="bg"> <div style="width: 500px;height: 200px"> <dv-border-box-1></dv-border-box-1> </div> </dv-full-screen-container> </div> </template>
边框效果如下，当然我们也可以通过color 和BackgroudColor来设置颜色。
设置颜色和背景颜色。这里的color属性支持配置两个颜色，一个主色，一个副色。
<template> <div id="index"> <dv-full-screen-container class="bg"> <div style="width: 500px;height: 200px"> <dv-border-box-1 :color="['red','green']" backgroundColor="blue"></dv-border-box-1> </div> </dv-full-screen-container> </div> </template>
项目中引入echarts
使用如下的命令来引入Echarts组件
npm install echarts -S
使用Vue封装Echarts组件
在开发数据大屏项目的时候，有可能需要引入大量的Echarts图表，所以可以将Echarts图表封装一下，在使用的时候可以直接使用。首先需要在main.js文件中引入Echarts 然后就是将Echarts挂载到Vue原型上，这样就可以直接使用this.$echarts访问到对应的实例。
引入 echarts
//引入echart import * as echarts from 'echarts' Vue.prototype.$echarts = echarts
创建一个自适应的js文件
在utils目录中创建一个resizeMixin.js的文件，用来去做大屏的自适应视图，并且创建一个utils/index文件做一个防抖的函数去监听屏幕大小的变化频率。
import { debounce } from '@/utils'; const resizeChartMethod = '$__resizeChartMethod'; export default { data() { // 在组件内部将图表 init 的引用映射到 chart 属性上 return { chart: null, }; }, created() { window.addEventListener('resize', this[resizeChartMethod], false); }, activated() { // 防止 keep-alive 之后图表变形 if (this.chart) { this.chart.resize() } }, beforeDestroy() { window.removeEventListener('reisze', this[resizeChartMethod]); }, methods: { // 防抖函数来控制 resize 的频率 [resizeChartMethod]: debounce(function() { if (this.chart) { this.chart.resize(); } }, 300), }, };
创建一个index.js的防抖文件
/** * @param {Function} fn 防抖函数 * @param {Number} delay 延迟时间 */ export function debounce(fn, delay) { var timer; return function () { var context = this; var args = arguments; clearTimeout(timer); timer = setTimeout(function () { fn.apply(context, args); }, delay); }; }
创建一个全局的Echarts的组件
在common文件夹下创建一个Echarts的文件夹创建index.vue的文件，内容如下，并且引入默认的主题文件，这个主题文件在后期也可以替换。
<template> <div :id="id" :class="className" :style="{height:height,width:width}"></div> </template> <script> import tdTheme from "./theme.json" import resizeMixins from "@/utils/resizeMixins"; export default { name: "echart", mixins: [resizeMixins], props: { id: { type: String, default: "chart" }, className: { type: String, default: 'chart' }, width: { type: String, default: '100%' }, height: { type: String, default: '2.5rem' }, options: { type: Object, default: ()=>({}) } }, data(){ return { chart:null } }, watch:{ options:{ handler(options){ this.chart.setOption(options,true) }, deep:true } }, mounted(){ // 默认注册主题 console.log("注册主题",this.$echarts) this.$echarts.registerTheme('tdTheme',tdTheme); // 初始化Echarts this.initChart(); }, methods:{ initChart(){ this.chart = this.$echarts.init(this.$el,"tdTheme") this.chart.setOption(this.options,true) } } } </script> <style> </style>
默认引入主题样式JSON文件
{ "color": [ "#2d8cf0", "#19be6b", "#ff9900", "#E46CBB", "#9A66E4", "#ed3f14" ], "backgroundColor": "rgba(0,0,0,0)", "textStyle": {}, "title": { "textStyle": { "color": "#516b91" }, "subtextStyle": { "color": "#93b7e3" } }, "line": { "itemStyle": { "normal": { "borderWidth": "2" } }, "lineStyle": { "normal": { "width": "2" } }, "symbolSize": "6", "symbol": "emptyCircle", "smooth": true }, "radar": { "itemStyle": { "normal": { "borderWidth": "2" } }, "lineStyle": { "normal": { "width": "2" } }, "symbolSize": "6", "symbol": "emptyCircle", "smooth": true }, "bar": { "itemStyle": { "normal": { "barBorderWidth": 0, "barBorderColor": "#ccc" }, "emphasis": { "barBorderWidth": 0, "barBorderColor": "#ccc" } } }, "pie": { "itemStyle": { "normal": { "borderWidth": 0, "borderColor": "#ccc" }, "emphasis": { "borderWidth": 0, "borderColor": "#ccc" } } }, "scatter": { "itemStyle": { "normal": { "borderWidth": 0, "borderColor": "#ccc" }, "emphasis": { "borderWidth": 0, "borderColor": "#ccc" } } }, "boxplot": { "itemStyle": { "normal": { "borderWidth": 0, "borderColor": "#ccc" }, "emphasis": { "borderWidth": 0, "borderColor": "#ccc" } } }, "parallel": { "itemStyle": { "normal": { "borderWidth": 0, "borderColor": "#ccc" }, "emphasis": { "borderWidth": 0, "borderColor": "#ccc" } } }, "sankey": { "itemStyle": { "normal": { "borderWidth": 0, "borderColor": "#ccc" }, "emphasis": { "borderWidth": 0, "borderColor": "#ccc" } } }, "funnel": { "itemStyle": { "normal": { "borderWidth": 0, "borderColor": "#ccc" }, "emphasis": { "borderWidth": 0, "borderColor": "#ccc" } } }, "gauge": { "itemStyle": { "normal": { "borderWidth": 0, "borderColor": "#ccc" }, "emphasis": { "borderWidth": 0, "borderColor": "#ccc" } } }, "candlestick": { "itemStyle": { "normal": { "color": "#edafda", "color0": "transparent", "borderColor": "#d680bc", "borderColor0": "#8fd3e8", "borderWidth": "2" } } }, "graph": { "itemStyle": { "normal": { "borderWidth": 0, "borderColor": "#ccc" } }, "lineStyle": { "normal": { "width": 1, "color": "#aaa" } }, "symbolSize": "6", "symbol": "emptyCircle", "smooth": true, "color": [ "#2d8cf0", "#19be6b", "#f5ae4a", "#9189d5", "#56cae2", "#cbb0e3" ], "label": { "normal": { "textStyle": { "color": "#eee" } } } }, "map": { "itemStyle": { "normal": { "areaColor": "#f3f3f3", "borderColor": "#516b91", "borderWidth": 0.5 }, "emphasis": { "areaColor": "rgba(165,231,240,1)", "borderColor": "#516b91", "borderWidth": 1 } }, "label": { "normal": { "textStyle": { "color": "#000" } }, "emphasis": { "textStyle": { "color": "rgb(81,107,145)" } } } }, "geo": { "itemStyle": { "normal": { "areaColor": "#f3f3f3", "borderColor": "#516b91", "borderWidth": 0.5 }, "emphasis": { "areaColor": "rgba(165,231,240,1)", "borderColor": "#516b91", "borderWidth": 1 } }, "label": { "normal": { "textStyle": { "color": "#000" } }, "emphasis": { "textStyle": { "color": "rgb(81,107,145)" } } } }, "categoryAxis": { "axisLine": { "show": true, "lineStyle": { "color": "#cccccc" } }, "axisTick": { "show": false, "lineStyle": { "color": "#333" } }, "axisLabel": { "show": true, "textStyle": { "color": "#fff" } }, "splitLine": { "show": false, "lineStyle": { "color": [ "#eeeeee" ] } }, "splitArea": { "show": false, "areaStyle": { "color": [ "rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)" ] } } }, "valueAxis": { "axisLine": { "show": true, "lineStyle": { "color": "#cccccc" } }, "axisTick": { "show": false, "lineStyle": { "color": "#333" } }, "axisLabel": { "show": true, "textStyle": { "color": "#fff" } }, "splitLine": { "show": false, "lineStyle": { "color": [ "#eeeeee" ] } }, "splitArea": { "show": false, "areaStyle": { "color": [ "rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)" ] } } }, "logAxis": { "axisLine": { "show": true, "lineStyle": { "color": "#cccccc" } }, "axisTick": { "show": false, "lineStyle": { "color": "#333" } }, "axisLabel": { "show": true, "textStyle": { "color": "#999999" } }, "splitLine": { "show": true, "lineStyle": { "color": [ "#eeeeee" ] } }, "splitArea": { "show": false, "areaStyle": { "color": [ "rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)" ] } } }, "timeAxis": { "axisLine": { "show": true, "lineStyle": { "color": "#cccccc" } }, "axisTick": { "show": false, "lineStyle": { "color": "#333" } }, "axisLabel": { "show": true, "textStyle": { "color": "#999999" } }, "splitLine": { "show": true, "lineStyle": { "color": [ "#eeeeee" ] } }, "splitArea": { "show": false, "areaStyle": { "color": [ "rgba(250,250,250,0.05)", "rgba(200,200,200,0.02)" ] } } }, "toolbox": { "iconStyle": { "normal": { "borderColor": "#999" }, "emphasis": { "borderColor": "#666" } } }, "legend": { "textStyle": { "color": "#fff" } }, "tooltip": { "axisPointer": { "lineStyle": { "color": "#ccc", "width": 1 }, "crossStyle": { "color": "#ccc", "width": 1 } } }, "timeline": { "lineStyle": { "color": "#8fd3e8", "width": 1 }, "itemStyle": { "normal": { "color": "#8fd3e8", "borderWidth": 1 }, "emphasis": { "color": "#8fd3e8" } }, "controlStyle": { "normal": { "color": "#8fd3e8", "borderColor": "#8fd3e8", "borderWidth": 0.5 }, "emphasis": { "color": "#8fd3e8", "borderColor": "#8fd3e8", "borderWidth": 0.5 } }, "checkpointStyle": { "color": "#8fd3e8", "borderColor": "rgba(138,124,168,0.37)" }, "label": { "normal": { "textStyle": { "color": "#8fd3e8" } }, "emphasis": { "textStyle": { "color": "#8fd3e8" } } } }, "visualMap": { "color": [ "#516b91", "#59c4e6", "#a5e7f0" ] }, "dataZoom": { "backgroundColor": "rgba(0,0,0,0)", "dataBackgroundColor": "rgba(255,255,255,0.3)", "fillerColor": "rgba(167,183,204,0.4)", "handleColor": "#a7b7cc", "handleSize": "100%", "textStyle": { "color": "#333" } }, "markPoint": { "label": { "normal": { "textStyle": { "color": "#eee" } }, "emphasis": { "textStyle": { "color": "#eee" } } } } }
构建完成之后，整体的目录结构如下图所示
