1、可视化图表的选择 #

使用图表类型：

• 趋势分析 折线图、面积图

• 占比 饼图、雷达图

• 对比 条形图、玉珏图

2.数据 #

• 在调取监控视频功能使用了rtmp

• 需要实时更新的数据（如成交记录）使用websocket以确保数据时效 为什么不用SSE：

  1. 有最大数量限制，一旦达到最大数量，会阻塞其他请求，造成长时间卡顿
  2. 这个问题可以解决，但没必要

• 不需实时更新的数据每60秒查询一次

3.设计稿尺寸 #

屏幕物理像素：9600*4320

稿件设计尺寸：3840*2160

注意事项：使用rem作为长度/字号单位

踩坑：

1. 实际需要投放的屏幕宽高比例与设计图比例不符，造成投影后比例失调，饼图被拉成椭圆形 解决：首先保证物理大屏显示正常，以物理大屏比例为准重新绘制

2. 字号较小，投放在大屏上后远看看不清 解决方案：以物理大屏比例为准调整字号

3. UI设计稿分辨率较低，在大屏展示时略微模糊 解决方案：以4K清晰度重新导出UI设计

4. 控制端电脑屏幕比例与物理大屏宽高比例差距过大 解决方案：使用多个显示器，拼接出比例最接近物理大屏的组合

4.技术选型 #

Vue3 #

vuecli打底

Antv G2 #

相对传统的echarts而言，Antv G2图标更注重交互与灵活性，更符合当今的需求与风格，外观相对echarts而言也更加优秀

Antv L7 #

蚂蚁集团 AntV 数据可视化团队推出的基于 WebGL 的开源大规模地理空间数据可视分析引擎。

5.页面布局与划分 #

使用1：1：1的左右布局

概念图

6.问题 #

性能 #

• Antv的性能问题主要体现在图形渲染方面，而图形渲染性能很大程度取决于画布上图形的数量，减少不必要的图形，比如在给图形增加边框时，使用stroke（描边色）与lineWidth（描边粗细）替代图形节点
• 销毁容器节点时，务必调用chart.destroy()方法以清除Antv添加的DOM片段，否则会造成内存泄漏等严重问题

动画 #

Antv的折线图在数据实时更新时，仍有动画不流畅、曲线变更怪异的问题，官方至今未能给出解决方案（echarts在这一点上做的十分出色，这是echarts为数不多优于antv的部分）

• Antv实时更新折线图Demo
• Echarts实时更新折线图Demo

6.整体的细节调优和测试 #

视觉测试： 关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。

性能与数据测试： 图形图表动画是否流畅、数据加载、刷新有无异常；页面长时间展示是否存在奔溃、卡死等情况；后台控制系统能否正常切换前端页面显示。