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

1 开发背景

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

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 = axios
app.config.globalProperties.echarts = echarts

app.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 date