可视化大屏对性能要求较高，
因此图片尽量选取webp或者svg格式的图片

据说还有一种方法：为了避免频繁的图片资源请求，将图片都用dataURL的格式加载

可视化图表开发的两个重点就是数据和图表，
在开发过程中一般我都会模拟一些图表绘制的数据，并把图绘制出来，
但是接口一旦对接之后就会出现各种各样奇怪的问题。

可视化图表的数据处理真的非常重要！非常重要！非常重要！

数据处理的几个可能出现的问题如下：

• 后台提供数据和前端数据不一致：
  • 在请求到后台数据，和得到最终绘制出图表数据之间，尽量比较清晰集中的添加一层数据处理层，不要把数据处理分散到各种各样奇怪的地方
• 考虑数据极端情况：
  • 除数为0、数组长度为0等等一类情况都需要被考虑在内，这些bug可能会藏得很深，到很后期的时候才显现出来
• 贯穿整个开发流程的前端独立测试
  • 前期使用静态数据还好，但是如果切换为后台数据，中间逻辑大概率要调整，绘制逻辑也变得越来越复杂
  • 这个时候，如果要涉及到一些细节部分的修改，可能就会非常复杂，比如我想要让图表某个类别显示某个颜色啦，如果好巧不巧后端就不返回这个类别，那就看不到效果
  • 所以就算是数据已经从接口中获取了，也一定要做好测试数据的生成，将测试数据和后台数据同步
  • 后台服务断开时，前端要有离线模式继续支撑开发

开发依赖数据进行展示的可视化项目，页面的展示依赖数据驱动。
图表的开发比较特殊，比如ECharts，在使用vite提供的开发环境下，修改代码触发的热更新无法驱动页面ECharts图表的重绘，

所以就需要每次都手动刷新页面查看修改后的效果，
更致命的是，越到后期，图表的微调就有可能越复杂，
这时如果图表的数据源已经使用接口数据了，就需要等待接口数据到来（数据量少还好，数据量多简直是折磨）

以前参与开发的一个卫星轨迹图就有这种情况，上百条卫星带着各自在时间段里的轨迹数据
对卫星点迹进行微调时，要用3-7s获取后台数据，再渲染，再查看效果，好窒息

这个时候一般都会搭建一个临时的服务器，模拟后台接口，返回固定数据

事实上，这个项目最后的大部分效果都能用ECharts实现，
平面绘制，大多数涉及到的效果无非就是：尺寸、色彩、布局，
静态页面的绘制一般涉及到的，大多数主流图表库都能够实现。

当我说图表的选择时，实际上一般需要考虑的，是这个图表要实现的交互的上限是什么。

因此首先就要先熟悉各个图表库的交互的特点，这个并不简单，
但是我这里可以简化思维：

如果产品经理和设计根本没设计交互，用ECharts，因为ECharts的交互和动画效果最为主流接受
如果设计了交互，但是交互都比较保守，用ECharts，理由还是一样
如果设计的交互非常新颖，ECharts已经满足不了，用自由度最高的，D3

当然还有HighChart、AntV等等其它的选择，
但有的时候真的不想考虑太多，顺手就行。

但是这次的设计有一个点，用ECharts还是没有办法实现的，就是半透明颜色之间交叠时出现的加深效果：

设计图

实际效果

可以看到设计图中，颜色交叠处有种ps中正片叠底/加深图层的感觉，
但是实际的图表绘制中，颜色的交叠部分是上层的颜色覆盖下层的颜色，

ECharts实际是提供混合模式配置项的，也就是blendMode

不开启blendMode

全开启blendMode

下层图层开启blendMode

上层图层开启blendMode

但非常坑爹的是，blendMode只支持2个值：

• lighter 变亮
• source-over 默认值

并且只有在渲染器renderer为canvas类型时，blendMode才生效

因为这里我用的是svg，所以大概率是没戏了。
但是还有一种方案：

绘制两层图层，
一层用canvas绘制，用于颜色控制，
一层用svg绘制，用于交互配置，

不过太麻烦了，查看echarts-liquid库源码，github上已经很久没有更新过了，
实际上结构并不复杂，如果花这么多时间基于现有的库去实现这样一种颜色混合的功能，说实话还不如研究一下如何自定义ECharts类型简单

这里的label和text的颜色有一个反相效果（svg渲染中），
实际上是两个文字叠在一起，一层作为底层，一层作为上层，上层文字被水波图形给剪掉了
但是能看到，因为clip-path指定的仅仅是对应series中的水波path，
这里也能看出canvas和svg处理图像的不同，
svg没有颜色缓冲区的概念，更强调元素之间的绑定关系
canvas会把画布上的颜色作为缓冲区进行维护，后加的颜色会在之前计算的颜色的基础上进行混合

用rem！用rem！用rem！
rem依赖根节点的font-size进行尺寸判断，
因此仅需要在首次进入页面和之后resize时动态修改根节点的font-size进行重新计算：

1
2
3
4
5
6
7
8
9
10
11

// 此处最大适配宽度3840，最小适配宽度1024
export function resize(){
    return new Promise((resolve,reject)=>{
        let rootWidth = document.documentElement.clientWidth || document.body.clientWidth
        let rootDom = document.querySelector('html')
        let k = 16/1920
        let b = 16 - 1920*k
        rootDom.style.fontSize = (k * rootWidth + b) + 'px'
    })
}
window.addEventListener('resize',resize)

我用的是Vue框架，组件的mount一定要在resize之后进行，
否则一些echarts表格开始绘制时，正确的rem大小还没有被计算出来：

1
2
3

resize().then(res=>{
  app.mount('#app')
})

另外，需要对网页能兼容的最大尺寸和最小尺寸进行配置：

1
2
3
4
5
6
7
8
9
10
11
12
13

.wrapper{
  background: #e9effa;
  width: 100%;
  height:67.5rem;
  min-width: 1024px;
  min-height:768px;
  max-width: 3840px;
  max-height:1838px;
  display: flex;
  flex-direction: column;
  position:absolute;
  overflow-x: hidden;
}

将rem的动态范围也限制在这个范围之内，
和《CSS揭秘》这本书作者强调的一样，样式编写需要DRY（Don’t Repeat Yourself）
能用动态单位（em、rem、vh、vw）就用动态单位，
灵活使用css变量、函数、响应式布局

如果你只有通过修改大量css代码才能实现页面适配，
那就要反思一下是不是你的页面实现存在问题。 ————《CSS揭秘》

根据尺寸自适应页面大小

• css原生变量非常好用
• 背景图片尽量选用svg或者webp格式
• 直接使用dataurl编码的图片，无需请求资源，性能更高
• 通过动态计算的配色方案往往效果更好，并且可维护性更好
• hsla非常好用

resize实际上就是另一种意义上的“自适应”，
但是不同点在于我用了echarts，ECharts的resize需要手动触发，
不仅如此，用css的rem控制的页面属性在resize时能够自适应，但是echarts里option的配置基本在创建的时候就写死了，
我的做法是在window.resize时，重新计算option里面所有涉及单位的属性，
不知道有没有更好的方法。

不仅仅是可视化大屏，任何有很多动效需要配合的项目都是如此，那就是需要对这些被打的乱七八糟的动画帧进行统一管理，
否则后期对某个动画帧的改变，会波及到整个页面其它动画的效果。

所以最接近我们要绘制的目标的实际是散点图，
但是散点图上需要有一个类似水球图的波浪动画，因此有如下三种方式：

• 利用散点图的symbol属性
  • symbol属性支持DataURL类型的数据，因此完全可以对散点图的节点进行自定义化
  • 
  • 但是问题在于如果是吧另一张echarts图表的绘制结果canvas/svg，转化为dataurl作为新节点的symbol，这是一张写死的图片，交互性非常有限，因此pass
  • 改进方式：不利用echarts实现的图表，而是自定义svg，将动画效果和交互都作为svg的一部分转换为dataUrl，保留交互性和动画
• 利用echarts的custom图表
  • 知道有这种方式，但是不熟，所以pass
• 利用echarts的水球图
  • echarts本身支持水球图，可以将水球图作为散点映射到坐标系上，似乎只在坐标映射上有工作量，最终选择这种方式

这里没有使用echarts自带的坐标系，手动实现坐标系的自适应，并非最初想的这么容易。

由于球体和坐标系不在一张画布上，
所以要知道球体是否出界，就必须知道画布的包围盒和坐标单位

以计算右边缘坐标为例，基本的实现思路就是：

初始化坐标轴右边缘为0
开始遍历每个点
计算点的右边缘
如果点的右边缘超过当前坐标轴右边缘
需要向坐标轴右侧添加单位（注意，在添加单位的同时，整体坐标单元也会缩小）
计算出添加的单位数量
右边缘加上添加数量，重新计算坐标单位
遍历结束，计算完毕

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

data.forEach((node, index)=>{
  // 计算x轴，y轴范围
  let r2px = node.mapRadius/2/100*content_h  // 半径
  let x = (node.x - axis_range.x[0]) * x_unit
  let y = (axis_range.y[1] - node.y) * y_unit
  let left =  x - r2px - gap_left
  let right = x + r2px + gap_right
  let top = y - r2px - gap_top
  let bottom = y + r2px + gap_bottom

  if(left<0){ // 左侧超过
    let n = axis_range.x[1] - axis_range.x[0]
    let left_add = Math.ceil(((node.x - axis_range.x[0]) * content_w -r2px*n)/(r2px - content_w))
    axis_range.x[0] -= left_add
    x_unit = countUnit(content_w, axis_range.x[1] - axis_range.x[0] )
  }
  if(right>content_w){ // 右侧超过
    let n = axis_range.x[1] - axis_range.x[0]
    let right_add = Math.ceil((content_w * n - (node.x - axis_range.x[0]) * content_w - r2px*n) / (r2px - content_w))
    axis_range.x[1] += right_add
    x_unit = countUnit(content_w, axis_range.x[1] - axis_range.x[0] )
  }
  if(top<0){ // 上侧超过
    let n = axis_range.y[1]-axis_range.y[0]
    let top_add = Math.ceil(
            (r2px*n - content_h*axis_range.y[1] + content_h * node.y) / (content_h - r2px)
    )
    axis_range.y[1] += top_add
    y_unit = countUnit(content_h, axis_range.y[1] - axis_range.y[0] )
  }
  if(bottom>content_h){ // 下侧超过
    let n = axis_range.y[1]-axis_range.y[0]
    let bottom_add = Math.ceil(
            (content_h*axis_range.y[1] - content_h*node.y)/(content_h-r2px) - n
    )
    axis_range.y[0] -= bottom_add
    y_unit = countUnit(content_h, axis_range.y[1] - axis_range.y[0] )
  }
  // 推入均匀模式下的x、y值
  x_category.push(node.x)
  y_category.push(node.y)
})

好在产品经理提出一张图最多只绘制20个球（后面改成了15个），有了数量控制，就能提供一种均匀模式，

之前之所以不均匀的原因就在于x轴、y轴都选用的是数据连续类型，数据是在0-max之间连贯映射的，
因此还可能出现噪点数据，破坏整个映射的效果，

均匀模式就是将x轴、y轴设置为离散类型，仅仅是按照从小到大的顺序排序，

下面是连续模式和离散模式之间的对比：

离散模式（先）&& 连续模式（后）

这里水球的半径需要能够反映权重的大小，
最初的做法是将最大半径和最小半径分别设置为高度的50%和10%，
将水球的权重（0-1）线性映射到这个范围之中：

1
2
3

let minRadius = 10, maxRadius = 50
// node.effect为权重
let radius = node.effect * (maxRadius - minRadius) + minRadius // 线性映射结果

结果很快发现有问题：

如果数据也是线性分布的，那效果还好，但抛去这个几乎不会出现的线性分布，其他时候效果都是很灾难的

• 数据离散度高
  • 数据偏高，大球重叠 [y = (max-min)x^2 + min]
  • 数据偏小，小球重叠 [y = (max-min)x^(1/3) + min]
• 数据离散度低
  • 一般数据都是挤在中间，导致不大不小的数据重叠在一起，最灾难的情况
    • gt = 大于平均值的数据数量
    • lt = 小于平均值的数据数量
    • n = 数据总数量
    • a = (gt - lt)/n
    • y = a·x^2+(max-a-min)x+min

1
2
3
4
5
6
7
8
9

let variance = data.reduce((a,b)=>{
   return a + Math.pow(b-ave, 2)
},0)/data.length // 方差
let standard_var = Math.sqrt (variance) // 标准差
let effect = standard_var/ave

let SDR = effect > 0.25 // true表示数据相差大，false表示数据相差小

console.log(`标准差：${standard_var}，标准差大于指定值：${SDR}，数据偏向：${dir}`)

因此也就是使用幂函数的方式进行映射处理

幂函数映射

最终的映射效果要好一些：

如果相邻两个元素的颜色能区分开，那是最好不过的了，
（本项目中，最终终于把颜色从图例的意义中分离出来，用于区分相邻2个元素的颜色了）

实际上就是计算被点击点和目标点位之间的dx、dy，然后对辐射图的画布进行平移。
使用gsap进行css transform插值，

1
2
3
4
5
6
7
8
9
10
11
12

// 获取画布饼图展示的中心点 [30%, 50%]
function getCanvasPieCenter(){
  const target = document.getElementById(props.domId)
  const boundBox = target.getBoundingClientRect()
  const grid = props.grid
  let canvasWidth = boundBox.width - grid.left - grid.right // 画布宽度
  let canvasHeight = boundBox.height - grid.top - grid.bottom //  画布高度
  canvasSize = [canvasWidth,canvasHeight]
  let halfWidth = canvasWidth * 0.3, halfHeight = canvasHeight * 0.5 // 一半的宽高
  center[0] = halfWidth + boundBox.left + grid.left
  center[1] = halfHeight + boundBox.top + grid.top + window.scrollY
}

1
2
3
4
5
6
7
8
9
10
11
12

// 获取偏移量
function getRectCenter(){
  // 当页面垂直滚动时，包围盒中心点会计算会忽略页面滚动值scrollTop
  rectCenter = [ // 包围盒的中心点
    boundRect.left + boundRect.width/2,
    boundRect.top + boundRect.height/2 + window.scrollY
  ] // 目标圆当前中心点
  const dX = center[0] - rectCenter[0]
  const dY = center[1] - rectCenter[1]
  // console.log(`centerX:${center[0]} centerY:${center[1]} rectCenterX:${rectCenter[0]} rectCenterY:${rectCenter[1]} dX:${dX} dY:${dY}`)
  return [dX,dY]
}

vis-timeline不像echarts，它是基于dom的，所以css配置项全都丢给用户自己通过className进行配置，
这一点让vis-timeline的样式自由度变得非常高，
vis-timeline本身应该是支持用html定制其中的内容的，
但是无奈这一点是我开发一半之后才在文档的犄角旮旯里找到的（vis-timeline的文档精简到一页就没了）
所以我使用的方法就是简单粗暴的dom操作。

这要从vis-timeline的一个钩子函数说起——onInitialDrawComplete
这个函数代表时间轴表已经绘制完毕了，我需要根据之前标识的className，
找到对应的dom，然后手动给里面加东西，
vis-timeline此时的作用就像是提供一个模具，至于里面是什么，我自己添加。

1
2
3
4
5
6
7
8
9
10

  let options = {
  onInitialDrawComplete:()=>{  // 绘制结束的回调
    setProgressStyle() // 自定义进度图样式
    setHeadStyle() // 自定义表头样式
    addEvent() // 添加事件
    loading.value = false
  },
  // ...
}
timeline = new vis.Timeline(targetDom, itemData, groupData, options)

vis-timeline中，视口范围内的概念非常重要，
时间单位跟随视口范围内的数据进行自适应，
同时视口范围还规定了需要处理的数据有哪些。
也就是懒加载，能够减少渲染时需要处理的数据数量。

但是这也是比较坑爹的，这就说明一旦我规范了视口的大小，在图表实例化结束后，只有视口内的dom会被渲染出来，
那么我就必须要在鼠标拖动或缩放到其它范围时，对dom进行重新填充操作，
也就是配合vis-timeline的懒加载进行dom操作（噩梦）。

但是这里水平和垂直的懒加载策略也不同：

• 垂直懒加载，没有滚动到的group在压根就不存在dom树中
• 水平懒加载，没有滚动到的item存在在dom树中，但是被通过css的transform属性移动到看不见的地方，并且vis-timeline将这些被隐藏的元素移动到父容器的后列（dom树顺序被修改了）
  针对这两点，采取如下策略：
• 垂直懒加载
  • 直接一次性将所有高度都绘制出来，不要懒加载了
  • 至于滚动，通过css实现
  • 注意点：这里图表内有一个下拉操作，所以容器实际高度需要进行动态计算
• 水平懒加载
  • 首先和垂直一样，时间范围首先拉倒最大
  • 至于下拉的柱状图的渲染，需要在下拉时，根据元素的transform判断这个元素是否被隐藏了，获取到没有被隐藏的元素
  • 对没有被隐藏的元素进行操作

未修复时，懒加载导致的dom计算错误

修复后

列表栏无限滚动，鼠标移入后停止滚动，鼠标移出继续滚动

• gsap插值控制dom的scrollTop
• 列表尾部加上几个重复项，以实现循环假象
  • 比如容器视口内展示5个，列表数据为[1,2,3,4,5,6,7,8,9,10]
  • 列表数据应当填充为[1,2,3,4,5,6,7,8,9,10,1,2,3,4,5]
• 用户鼠标控制动画
  • mouseenter tween.pause暂停动画
  • mouseleave tween.play继续动画

鼠标控制动画看似没有什么问题，但是这里问题就来了：

当用户鼠标移入滚动dom时，dom的scrollTop被改动了，
此时鼠标移出，tween如果接着之前的位置向下滚动，肯定是不行的
必须得接着用户滚动到的位置继续滚动

所以在动画暂停滚轮自定义滚动之后，需要重新创建一个tween，
它的目标值不变，依旧是容器的scrollHeight-scrollTop，
但是它的持续时间需要按照比例计算了，
得是当前动画滚动距离/初始动画滚动距离*初始动画持续时间，
然后再这个半截动画结束之后，将容器scrollTop置顶，重新发起循环的完整滚动动画：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

watch(loading,(nv,ov)=>{
  let dom = document.querySelector('#hot-kanban')
  if(nv == false){
    dom.scrollTop = 0
    let scroll_h = dom.scrollHeight
    let dom_h = dom.clientHeight
    let offset = scroll_h - dom_h
    let delay = 3
    let duration = 30
    if(offset>0){
      let initTweenOption = {
        scrollTop:offset,
        duration:duration,
        ease:'none',
      }
      tween = gsap.to(dom,{
        ...initTweenOption,
        delay:delay,
      })
      dom.onmouseenter = e =>{
        tween.pause()  // 动画暂停
        dom.onscroll = e =>dom.scrollTop == offset && (dom.scrollTop = 0) // 开始监听用户滚动事件
      }
      dom.onmouseleave = e => {
        let current_offset =  offset - dom.scrollTop
        let radio = current_offset / offset * duration
        tween = gsap.to(dom,{ // 重新开启动画
          scrollTop:offset,
          duration:radio,
          ease:'none',
          onComplete:()=>{
            dom.scrollTop = 0
            tween = gsap.to(dom,initTweenOption)
            tween.play()
            tween.repeat(-1)
          }
        })
        tween.play()
      }
      tween.repeat(-1)
    }
  }else{
    tween && tween.kill()
    tween = null
    dom.onmouseenter = undefined
    dom.onmouseleave = undefined
    dom.onscroll = undefined
  }
})