位置: IT常识 - 正文

VUE3.2 + vue-echarts + DataV 数据可视化大屏（项目）

编辑：rootadmin

VUE3.2 + vue-echarts + DataV 数据可视化大屏（项目） 1 开发背景

推荐整理分享VUE3.2 + vue-echarts + DataV 数据可视化大屏（项目），希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！

如今信息化高速发展，各式各样的数据层出不穷，如何能够掌握相应的数据并将数据整合，再通过可视化的方式呈现到客户的眼前，如何能过一眼望去就对整个公司的运行和及时发现可能存在的隐患，数据可视化是一个不可忽视的部分。利用好数据可视化，辅佐公司高层更好的进行决策和预警。

2 技术构成总览：构成：

web 标准简单来说可以分为结构、表现和行为。

结构方面使用html5 标签尽量采用语义化的标签，少用div这种无语义的标签

表现方面使用less，less比css更有逻辑性，是css的预处理器，扩充了css

行为方面使用vue3.2，vue3.2的语法糖使代码更加简便可读，可以省略很多步骤，但是vue3.2的reactive解构会失去响应式，使用ref又要加.value，有点繁琐

可视化数据图表方面使用vue-echarts，vue-echarts能够使用更少的代码去完成图表

数据传输方面使用axios，axios比ajax更适合现在前端的MVVM的浪潮

装饰和边框方面，使用DataV，DataV里面有很多炫酷的边框、装饰和功能，随拿随用，但是存在很多兼容性问题

布局方面，采用总体采用flex布局和rem实现，将不同部分划分为不同的组件.vue，例如按图表划分成不同组件，便于后期维护，也便于复用。另外，整体设计为响应式，确保在PC端不同的分辨率下保证可读性

3 整体项目3.1 预览

main.js:

import { createApp } from 'vue'import App from './App.vue'import axios from 'axios'import * as echarts from 'echarts'import ECharts from 'vue-echarts'import 'lib-flexible/flexible.js'import dataV from '@jiaminghi/data-view'const app = createApp(App)app.config.globalProperties.$http = axiosapp.config.globalProperties.echarts = echartsapp.use(dataV)app.component('v-chart', ECharts)app.mount('#app')

项目预览地址：http://47.106.144.95/

3.2 分析

大概分为header、centre、footer部分，分别对应上面文件结构图的header、centre、footer文件夹

header部分主要是标题，导航（未完成）。

centre部分又分为三个大块，左中右，左右部分又可以划分为四个组件，这四个组件可以随时替换，中间部分分为：雷达车间AVG运行动图和带数字翻牌器的数据统计

footer部分主要是横幅走马灯，播报信息或者欢迎词

4 代码部分4.1 header部分<script setup>import { onMounted, ref } from "vue";function getTime() {return new Date().toLocaleString();}var datetime = ref(new Date().toLocaleString())onMounted(() => {datetime.value = getTime();setInterval(() => {datetime.value = getTime();}, 1000)})</script>

其中：

获取当前时间，并每秒计时，利用响应式实现时间流动

4.2 centre部分4.2.1左右部分划分的四个组件，采用插槽的方式，最大程度复用宽高样式app.vue中

使用ItemPage.vue保证插入图表宽高复用

ItemPage.vue4.2.2 图表组件水波图：template中

其中：

dv-border-box-11 是DataV的边框组件

v-chart是vue-echart中的标签，其中的属性option和echarts用法一样，使用vue的reactive将option响应式之后将option绑定到v-chart中（可能会有响应式失效的问题）；autoresize是图表根据父元素宽高进行响应式更新；

script中

其中：

echarts-liquidfill是echarts的水波图，将series中的type设置为liquidFill即可

将option使用reactive响应式赋值

多折线图:template中:script中：

其中：

多折线图的日期为最近的七日，用计算属性稍微加工一下即可

问题：

堆叠折线图复制官网数据代码，y轴数据错乱

解决办法：

series每一组数据的stack: “Total”去掉或者设置成不同的值

象形柱图（已完成但是未展示出来的组件）（特殊的象形柱图）：展示：template都一样，以下不展示script中：<script setup>import { reactive } from "vue"const maxData = 2000;const IMG = "image://" + require('@/assets/img/people.png')//背景图const option = reactive({tooltip: {},xAxis: {max: maxData,splitLine: { show: false },offset: 10,axisLine: {lineStyle: {color: '#999'}},// axisLabel: {// margin: 10// }},yAxis: {data: ['A1车间', 'B1车间', 'Waterpik', '皓醒湾车间', '苏打水车间'],inverse: true,axisTick: { show: false },axisLine: { show: false },axisLabel: {// margin: 10,color: '#fff',fontSize: 16}},grid: {top: 'center',height: 250,left: 100,right: 60},series: [{type: 'pictorialBar',symbol: IMG,symbolRepeat: 'fixed',symbolMargin: '5%',symbolClip: true,symbolSize: 30,symbolBoundingData: maxData,data: [891, 1220, 660, 1670, 500],markLine: {symbol: 'none',label: {formatter: 'max: {c}',position: 'start'},lineStyle: {color: 'green',type: 'dotted',opacity: 0.2,width: 2},},z: 10},{type: 'pictorialBar',itemStyle: {opacity: 0.2},Size: 18,animationDuration: 0,symbolRepeat: 'fixed',symbolMargin: '5%',symbol: IMG,// symbol: 'diamond',symbolSize: 30,symbolBoundingData: maxData,data: [891, 1220, 660, 1670, 200],z: 5}]})</script>动态轮播表：template中:

其中：

dv-scroll-board 为DataV的轮播表组件，config为script中配置的轮播表配置

问题：

dv-scroll-board配置config中加入表头时出现问题，表中数据会塌陷，宽度为0不显示

解决办法：

自制表头

script中：

具体配置信息可以参考dataV官网

数字翻牌器：父组件（规定样式，获取初始值，实时获取改变后的值，将值传给子）

template中：

其中：

VUE3.2 + vue-echarts + DataV 数据可视化大屏（项目）

将num父传子，使用props传值，使用v-model使其响应式

title变化不大，因此没有赋值响应式

script中：

其中：

初始值是死数据，后期可以转变为axios获取，再用ref赋值

在onMounted中挂载一个定时器，模拟数据更新

在onUnmounted中卸载定时器，避免不必要的浪费

由于vue3.2中没有this获取全局变量，使用getCurrentInstance（）获取currentInstance，再通过.appContext.config.globalProperties获取全局属性

子组件

template中

其中：

通过props.title获取父传值

dv-digital-flop是dataV中的数字翻牌器功能，将配置好的config配置进config即可

script中：

其中：

使用defineProps接收父传过来的值，并用type规定类型，设置默认值

将num配置到config中

用watch监听num，实现当props.num改变，动态改变config的值

问题：

当num改变时，config改变，但是页面没有变化，响应式失效

解决办法：

使用watch解构赋值

雷达图+动态小车地图template中：

其中：

dv-decoration-12为dataV的雷达图，在此用作背景

script中：<script setup>import { getCurrentInstance, ref } from 'vue';import * as echarts from 'echarts'import svgtest from '@/assets/img/3.svg'const currentInstance = getCurrentInstance()const { $http } = currentInstance.appContext.config.globalPropertiesvar option = ref({})$http.get(svgtest).then(res => {echarts.registerMap('zhusuchejian', {svg: res.data})option.value = ({tooltip: {},geo: {map: 'zhusuchejian',layoutSize: '150%',zoom: 1.2,},series: [{name: 'Route',type: 'lines',coordinateSystem: 'geo',geoIndex: 0,emphasis: {label: {show: false}},polyline: true,lineStyle: {color: '#c46e54',width: 0},effect: {show: true,period: 8,trailLength: 0,symbolSize: [12, 30],symbol:'path://M87.1667 3.8333L80.5.5h-60l-6.6667 3.3333L.5 70.5v130l10 10h80l10 -10v-130zM15.5 190.5l15 -20h40l15 20zm75 -65l-15 5v35l15 15zm-80 0l15 5v35l-15 15zm65 0l15 -5v-40l-15 20zm-50 0l-15 -5v-40l15 20zm 65,-55 -15,25 c -15,-5 -35,-5 -50,0 l -15,-25 c 25,-15 55,-15 80,0 z'},z: 100,data: [{effect: {color: '#a10000',constantSpeed: 100,delay: 0},coords: [[30, 200],[790, 200],[790, 50],[460, 50],]},{effect: {color: '#00067d',constantSpeed: 80,delay: 0},coords: [[30, 430],[790, 430],[790, 50],[460, 50],]},{effect: {color: '#997405',constantSpeed: 60,delay: 0},coords: [[30, 485],[790, 485],[790, 50],[460, 50],]},{effect: {color: '#997405',constantSpeed: 60,delay: 0},coords: [[30, 710],[790, 710],[790, 50],[460, 50],]},{effect: {color: '#997405',constantSpeed: 60,delay: 0},coords: [[30, 770],[790, 770],[790, 50],[460, 50],]},{effect: {color: '#997405',constantSpeed: 60,delay: 0},coords: [[30, 990],[790, 990],[790, 50],[460, 50],]}]}]});})</script>

其中：

$http为将axios全局配置的别名

registerMap中放做好的svg图

雷达图设置图层靠后实现背景

问题：

svg不能直接导入使用

解决办法：

导入后使用axios获取

还有一些组件没有放上来，但是代码和上面的差不多柱状图饼状图

等等就不在赘述。

4.3 footer部分template中：

其中：