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 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.vue

4.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中：

其中：

• 将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.globalProperties
var 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中：

其中：

• 使用ref标记横幅走马灯的部分

script中：

其中：

• vue3.2中没有this.$ref直接在script中用ref响应式赋值一个同名的slogan即可找到标记ref的template

问题：

• 直接调用方法sloganMove无效，因为vue3.2中setup中为oncreate的生命周期内，此时html还未渲染完成，找不到相应的slogan的属性

解决办法：

• 将sloganMove放入onMounted中，挂在完成后操作

5 结语

代码十分粗糙简陋所以暂未发布到github，等后期技术积累起来完善功能后再发布。

写博客不易，有兴趣的话点个赞。

作为一个前端小白，第一次独立完成vue+echarts项目，内容还很粗糙，技术也很浅薄，有很多问题和不理解的地方，如有不对的地方，欢迎指正。

欢迎评论 💬点赞👍🏻 收藏 📂加关注+