Vue+ECharts爬坑回忆录

项目概述

1. 依赖包版本

// package.json
{
  // ...
  "dependencies": {
    // ...
    "echarts": "^4.8.0",
    "vue": "^2.6.10",
    // ...
  },
  // ...  
}

2. 业务说明

简要分析下公司目前的数据大屏情况：

除了地图模块数据量相对复杂些，其他模块展示的数据量可控；
项目设置了专门的展厅，页面需要长时间启用，页面时有崩溃现象发生；
页面投放方式为主机加载后，有场景会涉及需要使用浏览器内置的缩放功能展示。

项目的页面缩放方案参考了百度云页面的实现思路，按照固定的宽高比（如：16:9）来计算出最合适的缩放比进行缩放渲染。

<template>
  <div class="scale-box" :style="{width: cw + 'px', height: ch + 'px'}">
    <div class="scale-container" :style="{transform: 'scale(' + scale + ')', width: width + 'px', height: height + 'px'}">
      <slot></slot>
    </div>
  </div>
</template>

// 容器宽高
let cw = 0;
let ch = 0;

// UI规范宽高
let width = 1920;
let height = 1080;
let scale = 1;

// 可视区宽高比例
let ww = window.innerWidth / this.width;
let wh = window.innerHeight / this.height;

// 计算实际最合适缩放比：以小者为缩放基准，内容不足处留白处理，确保内容展示的完整性。原理同背景图的background-size属性。
scale = ww < wh ? ww : wh;

// 更新容器渲染宽高
cw = this.width * scale
ch = this.height * scale

一、`Canvas` 渲染还是 `SVG` 渲染

1. 理论梳理

Canvas 更适合绘制图形元素数量非常大的图表，也利于实现某些视觉特效。

// 使用 Canvas 渲染器（默认）
var chart = echarts.init(containerDom, null, {renderer: 'canvas'});
// 等价于：
var chart = echarts.init(containerDom);

SVG 内存占用更低、渲染性能略高、用户使用浏览器内置的缩放功能时不会模糊。
```
// 使用 SVG 渲染器
var chart = echarts.init(containerDom, null, {renderer: 'svg'});
```

综上所述，选择哪种渲染器，需要根据 软硬件环境、数据量、功能需求 来综合考虑决定。

业务场景(↓) \ ECharts渲染器(→)		Canvas	SVG
软硬件环境较好数据量不大		√	√	软硬件环境较差数据量不大	多ECharts实例浏览器易崩溃	×	√	数据量很大交互较多	√	×

注意目前的 SVG 版中，富文本、材质功能尚不支持。

2. 项目分析

基于现有缩放方案，UI 稿是按照 1920 × 1080 的宽高像素输出，购置的硬件规格也是一个屏幕为 1920 × 1080 像素的宽高尺寸。

如果一个页面在一个硬件屏幕上展示时，无需缩放，展示效果接近输出的 UI 稿。
但实际存在九个硬件屏幕拼接成一个大屏幕来渲染一个页面的场景（此时相当于页面被二次放大了 9 倍。最终，页面元素渲染模糊）。

综上所述，公司该数据大屏项目最终选择的 ECharts 渲染器为 SVG。

// svg渲染
var chart = echarts.init(containerDom, null, {renderer: 'svg'});

3. 来个扩展

关于 ECharts 元素渲染模糊问题，翻看 ECharts文档有发现一个配置参数：devicePixelRatio（设备像素比，默认取浏览器的值 window.devicePixelRatio）。

试问，开发中是否可以保留使用 Canvas 渲染，通过设置 devicePixelRatio 来解决元素渲染模糊这个问题呢？

思路如下：

保留 ECharts 默认渲染器（Canvas）；
设置 devicePixelRatio 为一个较大值，如：9；
使用浏览器内置的缩放功能查看页面元素渲染结果是否模糊。如果模糊，那存在对应场景的业务代码就只能采用 SVG 渲染模式；如果不模糊，那就可以继续使用 Canvas 渲染啦，只是加多一个 devicePixelRatio 参数值设置而已。

思路有了，那我们测试下吧~

默认渲染器，默认设备像素比

// 默认渲染器，默认设备像素比
var chart = echarts.init(containerDom);

Vue+ECharts爬坑回忆录

默认渲染器，设备像素比设置为较大值

// 默认渲染器，设备像素比设置为较大值
var chart = echarts.init(containerDom, null, {devicePixelRatio: 9});

Vue+ECharts爬坑回忆录

SVG 渲染

// svg渲染
var chart = echarts.init(containerDom, null, {renderer: 'svg'});

Vue+ECharts爬坑回忆录

由此说明，如若是单纯考虑浏览器内置的缩放功能的因素，使用 SVG 渲染并不是必须的。而且仔细看会发现，Canvas 渲染的效果更丰富：当前高亮模块的渐变竖线，Canvas 渲染有，而SVG 渲染没有。

二、慎用有色原生表格渲染数据

1. 问题陈述

基于现有缩放方案，使用原生表格（qb-origin-table）渲染数据，如若表格行（tr）是有背景色的，使用该页面缩放方案即使表格的边框合并在一起（border-collapse: collapse;），表格边框之间的间距（border-spacing）为 0，无边框（border: 0 none;），边框色透明（border-color: transparent;），单元格之间仍可见一条黑线！

Vue+ECharts爬坑回忆录

最终不得不借用无意义的 div 模拟实现表格（qb-imitate-table）来兼容。

2. 原理分析

CSS3 transform 属性 scale 改变的不是元素的宽高，而是 X, Y 轴的刻度。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3 transform scale解析</title>
  <style>
    .box-origin {
      width: 100px;
      height: 100px;
      margin: 150px;
      background: lightgray;
      color: black;
    }

    .box-scale {
      width: 100px;
      height: 100px;
      margin: 150px;
      background: lightgray;
      color: black;
      transform: scale(2);
    }
  </style>
</head>

<body>
  <div class="box-origin">原始div块</div>

  <div class="box-scale">原始div块scale放大后的div块</div>
</body>

</html>

Vue+ECharts爬坑回忆录

HTML 采用的是窗口坐标系，以参考对象的元素盒子左上角为坐标原点，x 轴向右，y 轴向下，坐标值对应像素值。
- 保留等比缩放
- 重置缩放比例为默认值
尝试对表格行重置缩放比例（transform: scale(1);），黑线并未消除。考虑到坐标系因素，往上一层层重置，直到重置到最外层的缩放比，黑线终于没有了！