# 可视化入门学习

### 前言

可视化是指用于创建图形、图像或动画，以便交流沟通讯息的任何技术和方法。翻译成人话，即用图表 / 图形来代替文本描述。可视化的重点在于**清晰**地表述**观点**。那么该如何入门可视化呢？师父有言，**“先去调研，看看目前的可视化组件能做到什么程度”**做事前先调研，既可以对该领域有一个大致的认知，又可以避免重复造轮子，为日后能在该领域做出一些独特的贡献打下基石。

### 调研

**1. 调研方法论**

* 调研对象

  | 组件名        | 地址                                                        |
  | ---------- | --------------------------------------------------------- |
  | Antv       | <https://antv.vision/en>                                  |
  | Vue        | <https://vue.mtruning.club/#/project/items>               |
  | Echarts    | <https://echarts.apache.org/en/index.html>                |
  | Highcharts | <https://www.highcharts.com/> / <https://www.hcharts.cn/> |
  | D3         | <https://d3js.org/>                                       |
  | Ploty      | <https://plotly.com/dash/design-kit/>                     |
  | Sugar BI   | <https://cloud.baidu.com/product/sugar.html?track=zhihu>  |
* 如何弄出一套适用的评定算法 / 方法论？
  * 先以某个成熟的大型组件为测试样例，逐一测试以下量化标准，一方面观察该组件是否符合标准，符合标准到一个什么程度；另一方面反过来思考这样的标准是否有意义，可以对标准进行一个适当地增删
  * 对标准进行合并整理，提出可量化的方法论
* 量化标准：

  > 特色（最重要且最需要关注的地方）
  >
  > 交互模式（在线还是离线；CS / BS / APP)
  >
  > 组件暴露的API是否有详细且规范的输入输出描述？（关注二次开发有无可能）
  >
  > 组件通用功能是否完善？有无约束和限制？动态效果怎么样？大数据渲染性能怎么样？
  >
  > 组件是否有人持续更新与维护？社区活跃度怎么样？（遇到问题是否容易解决）
  >
  > 是否有可以直接运行或者借鉴的 demo？（直接体现出效果）
  >
  > 是否支持离线（内网使用）？
* 评定组件的方法：
  * 体验官网的各个模块 + 本地安装尝试 + 看用户生态 / 用户评价 + 探索离线部署方式
    * 关注离线场景下的组件部署，可尝试以下方法：rancher（K8s的一个应用，底层依赖 docker 镜像）、`docker + Nexus + Gitlab`、第三方云原生交付平台（阿里云、ThingJS）
  * 行研报告 （调查不仅针对组件本身，同时也可以观察组件背后的开发者）

**2. 调研示例**

* ECharts（侧重于图表）

  | 特色                                                           | 交互               | 使用                                                                                               | API            | 活跃度                                                                  | 不足                          |
  | ------------------------------------------------------------ | ---------------- | ------------------------------------------------------------------------------------------------ | -------------- | -------------------------------------------------------------------- | --------------------------- |
  | <p>1.图表样式齐全，颜色鲜明、对比度高<br>2.支持 Canvas 与 SVG，网页实时渲染效果好，延迟低</p> | BS / 作为库文件引入前端文件 | <p>1.对于提供的图表样式，可直接在线修改数据从而快速获得图表，或下载其源码进行二次开发；<br>2.可在线定制下载 echarts 模块，使其作为 js 库文件引入前端开发直接使用</p> | 有很细致且规范的输入输出描述 | <p>Stackoverflow 相关问答很多<br>其 github 项目主体稳定且有人负责维护与更新<br>用户体验反馈较好</p> | 对于 3D图形 / 数据量较大的渲染，网页响应效果不佳 |

作为库文件引入使用示例：

<figure><img src="https://4115421394-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FphkhzXjy1VCjm6rtX0Zs%2Fuploads%2FXdsqfaVRA4BVR1rdxB7i%2Fimage.png?alt=media&#x26;token=8f98b067-fd37-409b-86ba-c6d0c3874e4c" alt="" width="563"><figcaption></figcaption></figure>

在线修改 demo 使用示例：

<figure><img src="https://4115421394-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FphkhzXjy1VCjm6rtX0Zs%2Fuploads%2FLnkGxeeS7u6aRyVjQoAF%2Fimage.png?alt=media&#x26;token=caf8b488-afbb-4159-a2d1-142217ce3b87" alt="" width="563"><figcaption></figcaption></figure>

Echarts离线部署方案：

1. 官网定制下载插件代码，再使用U盘 / 光盘拷贝至目的主机；<br>

   <figure><img src="https://4115421394-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FphkhzXjy1VCjm6rtX0Zs%2Fuploads%2Fs8iIS3vP8C6CGEdYgKd1%2Fimage.png?alt=media&#x26;token=318fa3ed-7bff-4938-acd4-44a0271210a7" alt=""><figcaption></figcaption></figure>
2. 从 github 上拉取源码后，使用 cnpm 安装相应依赖。依靠 npm 可以提供内网服务，也可以引用 `/echarts/dist` 中的 js 文件进行二次开发。

<figure><img src="https://4115421394-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FphkhzXjy1VCjm6rtX0Zs%2Fuploads%2FyDDBvZQa9kEcIUCltDIY%2Fimage.png?alt=media&#x26;token=fcec5d87-c0e8-4e88-944f-cc7736a237b5" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="https://4115421394-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FphkhzXjy1VCjm6rtX0Zs%2Fuploads%2FmDIJxZfwFCrbBwAj5dcd%2Fimage.png?alt=media&#x26;token=68cfef49-03e5-4d41-8cd6-dd2dd114626a" alt="" width="411"><figcaption></figcaption></figure>

**3. 调研结论**

* 现有可视化组件类别：
  * 图表开发。例：Echarts、Highcharts、Chart.js、react-vis、ApexCharts
  * 图形开发。例：Antv、D3.js、billboard.js
  * 低代码开发，实现所见即所得。例：Sugar BI、react-big-screen、vue-big-screen
  * 模块开发，专注于某一类图表 / 图形。例：Deck.gl
* 现有可视化组件功能总结：
  1. 在线修改 demo 代码，将图表导出使用；
  2. 作为库文件引入前端 IDE，进行二次开发。
* 调研思考：
  * 现有可视化组件涵盖了基本所需的图表类型，demo 多而全。因此对于简单的开发情景，采用“拿来主义“，使用 Echarts，Antv/g2，甚至使用 Sugar BI，都能满足要求。\
    但如果要面对的是高度定制化的图表开发需求，那么 D3.js / Antv 几乎是唯一的出路。因为它们是面向**图形**开发的可视化组件，自由度高。但相应的这一类组件几乎都有自身的图形交互语法，学习曲线比较陡峭，不适用于敏捷开发。

​未来具有**竞争力**的开发组件应该具备以下特点：

| 特点       | 原因                                                     |
| -------- | ------------------------------------------------------ |
| 面向图形开发   | <p>1. 图表开发需要涵盖大量的 demo，才能具有竞争力，成本高<br>2. 可以实现定制化开发</p> |
| 专注于某一模块  | 开发功能齐全的组件，对于个人开发者是不现实的，同时组件功能也难以达到行业顶尖水平               |
| 适配移动端    | 现有可视化组件的痛点之一是无法在移动端实现流畅地访问。现有的可视化组件即便能够访问，页面适配也做得极其糟糕  |
| 多人实时开发共享 | 类似腾讯文档的在线文档功能，现有可视化组件中尚未有组件实现这一功能，这可能是一个突破口            |

#### 结语

1. **观点**是可视化的灵魂；
2. 如何向一个毫无前置知识的人，清晰地阐述一个观点，是可视化的**艺术；**
3. 留心观察生活中的点滴，思考这些东西向我传递了什么观点，是以一种什么样的形式？了解别人能做什么，然后去做别人没做到的事；
4. 在研究的开始阶段，**假设**拥有完美的前置条件，往往有利于研究的开展。