使用Vue实现数据可视化大屏功能(二)

本文介绍: 数据可视化页面一般是在浏览器中进行全屏的展示，全屏容器会根据当前的浏览器屏幕窗口大小自动的进行缩放处理，在浏览器全屏之后，整个的全屏容器就会充满全屏。注意在使用之前请将body的margin 属性设置为0。Vue中引入代码如下

引入 数据 大屏 相关 组件

用Da t av 插件做大屏可视化的组件，官网地址 http://datav.ji a min g h i.com/ ，整个组件库都是基于Vue Re a ct 版本实现，主要用于构建大屏数据可视化页面，具有很多种类的组件可以使用。其安装方式如下。

npm install @jiaminghi/data-view

全屏容器 介绍

数据可视化页面一般是在浏览器中进行全屏的展示，全屏容器会根据当前的浏览器屏幕窗口大小自动的进行缩放处理，在浏览器全屏之后，整个的全屏容器就会充满全屏。注意在使用之前请将body的margin属性设置为0。Vue中引入代码如下

&lt;template&gt;
    &lt;div id="index"&gt;
        <dv-full-screen-container&gt;
            数据可视化
        </dv-full-screen-container>
    </div>
</template>

Loa d ing加载 效果

在数据没有加载完成之前，页面应该处于一个数据加载的状态，这个状态就是由我们的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 和BackgroudColo r来设置颜色。

在这里插入图片描述
设置颜色和背景颜色。这里的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 目录中创建一个 re sizeMixin.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的组件

在co mm on 文件夹下创建一个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"
        }
      }
    }
  }
}