上文回顾
链接 什么是数据可视化。
通过上文的资料的查阅以及一些自己的感受，现在大概也搞明白了什么是数据可视化，以及数据可视化的推进过程中存在哪些问题，比如盲目的进行可视化致使迷失了自我，一味的追求酷炫的效果致使重点内容被弱化···
那么落实到个人，作为一个希望进入数据可视化领域的前端开发工程师而言，我应该如何进行可视化方面的学习呢？应该从何做起？
可视化库
1. AntV
老是说谁不是上来就是一个数据可视化的引擎搜索呢？我也不例外···经过一顿查阅，我发现蚂蚁家的 AntV 可视化系列做的很不错，为什么说是系列？我先给上个链接：
如果你打开的网站的话，你会发现它其实包含了很多的子项目，包括：
- G2：统计图引擎（折线图、桑吉图）
- F2：移动端统计图引擎（折线图、桑吉图）
- G6：图可视化引擎（关系图、路径图）
- X6：图编辑引擎（可操作的流程图）
- L7：空间地理可视化引擎（大多与地图有关）
- ···
而在这基础之上又衍生出了基于相关引擎的图形案例，形成了诸如 G2 Plot 此类的图形库，并最终被汇聚到了 Ant Design Charts。
2. Apache Echarts
这个库可能知道的人非常多，并且使用量也是蛮大的，就比如我之前就比较喜欢用它。
3. D3.js
D3 (Data-Driven Documents or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving you the full capabilities of modern browsers and the freedom to design the right visual interface for your data.
值得注意的是现在 D3 支持 SVG、Canvas、HTML，我仿佛记得之前看它还不支持 Canvas。
4. Three.js
JavaScript 3D libraryThe aim of the project is to create an easy to use, lightweight, 3D library with a default WebGL renderer. The library also provides Canvas 2D, SVG and CSS3D renderers in the examples.
如果需要用到 3D 技术的话，Three 会是一个不错的选择。
从哪里开始？
这么多个库一个比一个高大上，那么做一名求知者，我想首先让自己先输出一点东西好有反馈是一个不错的学习方式。也就是说的先搞出来点东西看看，让自己产生一些成就感。
Ant Design Charts 目前看是设计给 React，虽说用 React 也无所谓了，但是考虑到入门的方式应该更加的通用一些，所以还是选择一个更加不依赖与其他框架的库来进行尝试吧。
Apache Echarts 就不错，使用非常简单就可以出东西，完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>apache echarts</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'))
var option = {
title: {
text: 'ECharts entry example',
},
legend: {
data: ['Sales'],
},
xAxis: {
data: [
'shirt',
'cardign',
'chiffon shirt',
'pants',
'heels',
'socks',
],
},
series: [
{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
},
],
}
myChart.setOption(option)
</script>
</body>
</html>结果如图所示
用一句话来总结就是：把 option 作为参数传递给 echarts 并且将结果渲染到 #main 元素内。
注意：tooltip: {} 可以去掉，但 yAxis: {} 不可以去掉。
title: 报表的 title。
title: {
text: 'ECharts entry example',
}legend: 报表图例。
legend: {
data: ['Sales']
}xAxis: x 轴。
xAxis: {
data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks']
}series: 系列，按顺序对应 x 轴的值。
series: [
{
name: 'Sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
},
]好了，第一个可视化就这么的简单！
还有哪些？
echarts 的官网最近升级了，感兴趣的同学可以导航过去看看。
初学时，模仿是一个不错的方法，虽然是 echarts 简单的 example 即便是模仿也可能很难产生成就感，但是你也可以自由发挥主管能动性，去用自己的数据去配置一些报表。这样更有利于理解图表本身所传达的信息。
比如，我们来拿 January 2021 的关系型、文档型、kv 型、时序型、图型 5 种数据库的打分前五名做一个统计。
关系型
| 排名 | 库 | 分数 |
|---|---|---|
| 1 | Oracle | 1322.93 |
| 2 | MySQL | 1252.06 |
| 3 | Microsoft SQL Server | 1031.23 |
| 4 | PostgreSQL | 552.23 |
| 5 | IBM Db2 | 157.17 |
文档型
| 排名 | 库 | 分数 |
|---|---|---|
| 1 | MongoDB | 457.22 |
| 2 | Amazon DynamoDB | 69.14 |
| 3 | Microsoft Azure Cosmos DB | 32.97 |
| 4 | Couchbase | 31.63 |
| 5 | CouchDB | 16.35 |
kv 型
| 排名 | 库 | 分数 |
|---|---|---|
| 1 | Redis | 155.01 |
| 2 | Amazon DynamoDB | 69.14 |
| 3 | Microsoft Azure Cosmos DB | 32.97 |
| 4 | Memcached | 25.97 |
| 5 | Hazelcast | 8.77 |
时序型
| 排名 | 库 | 分数 |
|---|---|---|
| 1 | InfluxDB | 26.32 |
| 2 | Kdb+ | 7.96 |
| 3 | Prometheus | 5.71 |
| 4 | Graphite | 4.68 |
| 5 | RRDtool | 3.19 |
图型
| 排名 | 库 | 分数 |
|---|---|---|
| 1 | Neo4j | 53.79 |
| 2 | Microsoft Azure Cosmos DB | 32.97 |
| 3 | OrientDB | 5.33 |
| 4 | ArangoDB | 5.29 |
| 5 | JanusGraph | 2.58 |
数据来源于 db-engines，我们把他们做成一个多 legend 的柱状图。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>apache echarts</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.1/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
let myChart = echarts.init(document.getElementById('main'))
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
data: ['关系型', '文档型', 'kv型', '时序型', '图型'],
},
xAxis: [
{
type: 'value',
},
],
yAxis: [
{
type: 'category',
data: ['5th', '4th', '3th', '2th', '1th'],
},
],
series: [
{
name: '关系型',
type: 'bar',
emphasis: {
focus: 'series',
},
data: [157.17, 552.23, 1031.23, 1252.06, 1322.93],
},
{
name: '文档型',
type: 'bar',
emphasis: {
focus: 'series',
},
data: [16.35, 31.63, 32.97, 69.14, 457.22],
},
{
name: 'kv型',
type: 'bar',
emphasis: {
focus: 'series',
},
data: [8.77, 25.97, 32.97, 69.14, 155.01],
},
{
name: '时序型',
type: 'bar',
emphasis: {
focus: 'series',
},
data: [3.19, 4.68, 5.71, 7.96, 26.32],
},
{
name: '图型',
type: 'bar',
emphasis: {
focus: 'series',
},
data: [2.58, 5.29, 5.33, 32.97, 53.79],
},
],
}
myChart.setOption(option)
</script>
</body>
</html>效果如下：
小结
像 echarts 这种简单快速开箱即用的库真的非常的方便，从思维方式的出发点来看的话，echarts 更适合于那种基于已有的场景数据，去考虑可以匹配到 echarts 的哪个图表上，然后把数据怼进去就能出图这样的方式。
虽说这么来使用也还好，但总有一种“想办法套进去”的感觉，始终处于一种被动的行为模式当中，可能对于前期的学习会有不错的帮助，但是对于晋升而言可能会暴露出缺乏创造力的因素。
所以在慢慢熟悉了基本的可视化方案之后，阅读一些不错的书刊，从图表本身的设计初衷开始，不是为了作图而作图，而是为了传达特定的信息而选择某个图，这样的思考方式应该是选择可视化所应具备的基础业务能力吧。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。