引入数据大屏相关组件
用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"
}
}
}
}
}
构建完成之后，整体的目录结构如下图所示
