# 可视化入门学习

### 前言

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

### 调研

**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="/files/htdOUA3WJUKTQlO7Lav4" alt="" width="563"><figcaption></figcaption></figure>

在线修改 demo 使用示例：

<figure><img src="/files/DlzN1eTwxQ6PyYny20VV" alt="" width="563"><figcaption></figcaption></figure>

Echarts离线部署方案：

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

   <figure><img src="/files/uSr8k020Z46iFjypXLFF" alt=""><figcaption></figcaption></figure>
2. 从 github 上拉取源码后，使用 cnpm 安装相应依赖。依靠 npm 可以提供内网服务，也可以引用 `/echarts/dist` 中的 js 文件进行二次开发。

<figure><img src="/files/ikNvBq5q8CO2YqUAIU82" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="/files/W0DHLRgZTzNcs2nHEA1C" 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. 在研究的开始阶段，**假设**拥有完美的前置条件，往往有利于研究的开展。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://blog.kaisuping.cn/technology/ke-shi-hua-ru-men-xue-xi.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.