D3 vs G2 vs Echarts以及其他可视化图表

绝地灬酷狼 2021-09-18 23:40 449阅读 0赞

初次接触 web 图表开发的工程师，面对众多的可视化工具库难免会有疑惑，比如说：

这库的产品定位？

哪个更好学？

哪个更强大？

让我们带着问题，从这三个库的命名出发，比较一下：

[Echarts][]

**简述**：

该库为百度团队开发，因其开源免费又容易手上，所以很快流行起来。

正如其名 Echarts，亦如其它的 xxCharts 类库一样，该库中封装了绝大多数常规 chart，用户通过配置 options 参数，就可很容易绘制指定图表。

**优势**：

容易上手：其语法类似 css 的参数配置型语法，学习门槛较低。

图表种类较丰富：因其发布较早且有百度团队维护，其提供的图表类型已能满足绝大部分常规性的业务需求。

**劣势**：

自由度差：参数配置型语法库的本质是调用现成的绘图函数，所以此类库的通病就是定制化能力差，想做出开发者未封装的图表非常难。

代码复用率低：因为此类库封装程度已非常高，所以很难对其进一步抽象和封装。

**产品受众**：

无数据可视化知识的前端工程师

**G2****：****[The Grammar of Graphics][]**

**简述**：

该库由蚂蚁金服 antV 团队开发，其设计理念更有学术性，走出了一条与 echarts 不同的产品线路。

正如其名 The **G**rammar of **G**raphics -可视化图形语法，该库有着被称为可视化圣经的《The Grammar of Graphics》作理论支撑，将可视化理论与web技术做了非常好的结合。

**优势**：

自由度较高：由可视化理论做基础，没有类似 Echart 的 chart 概念，可用“可视化语法”绘制想要的图表，非常灵活。

例如一根堆积柱形图的坐标系由笛卡尔坐标系改为极坐标系，堆积柱形图就变为了圆环图。

代码复用率较高：因其有一套完善的可视化语法，所以团队或公司可根据自己的 UI 需求，用 g2 做底层库，封装自己的 charts 库。

**劣势**：

学习成本稍高：g2 有理论的加持既是优势也是劣势；优势是更高效了，却也提高了可视化小白的使用门槛。

比如理解 g2 的绘图原理至少要知道数据可视化的五种“视觉通道”：数据可以映射到 position, size, color, shape, opacity 五个维度等等。

**产品受众**：

数据可视化工程师

希望向数据可视化领域发展的前端工程师

**D3****：****[Data Driven Documents][]**

**简述**：

该库几乎凭 **[Mike Bostock][] **一人之力完成，且在学术界、专业团队中享有极大声誉。(想自学 D3 的同学请戳 [《如何自学 D3》][D3])

该库更接近底层，与 g2、echarts 不同，d3 能直接操作 svg，所以拥有极大的自由度，几乎可以实现任何 2d 的设计需求。

正如其名 **D**ata **D**riven **D**ocuments，其本质是将数据与 DOM 绑定，并将数据映射至 DOM 属性上(这时视觉通道、比例尺转换等理论就可发挥作用喽～)。

同时，如下图，d3 长于可视化，而不止于可视化，还提供了数据处理、数据分析、DOM 操作等诸多功能。

![Image 1][]

图片来自网络

**优势**：

掌握 d3 后，限制作品水平的只会是想象力而不再是技术。

**劣势**：

学习门槛较高，对用户的 web 技术、可视化理论、数学逻辑都一定要求。

**产品受众**：

希望向中高水平进阶的可视化工程师

希望向中高水平进阶的前端工程师

**题外话：**

任何一款工具型产品，在产品设计时都遇到“自由度”和“简便性”两者间的权衡与取舍，而往往这两者很难兼得，我将这种情况称之为“跷跷板难题”。

![Image 1][]

~

这也是为什么 echarts 使用简单而自由度差， d3 自由度好而学习门槛高的原因了。

所以，回到 “哪个更强大” 的问题，这个问题，从不同角度看，会有不同答案。

在我看来，这三款可视化库各有优劣，没有哪款更强大，只有哪款更适合。

就像美图秀秀与 PhotoShop，分别满足了不同人群，不同场景的需求。

### 最后介绍几个比较有名气的其他可视化图表 ###

1、[BizCharts][]

2、[HighCharts][]

3、ant design pro 下的 [chart图表][chart]

[Echarts]: http://echarts.baidu.com/
[The Grammar of Graphics]: https://antv.alipay.com/zh-cn/g2/3.x/index.html
[Data Driven Documents]: https://d3js.org/
[Mike Bostock]: https://bost.ocks.org/mike/
[D3]: https://www.jianshu.com/p/88eae8fbe94e
[Image 1]: 
[BizCharts]: https://bizcharts.net/index
[HighCharts]: https://www.highcharts.com.cn/
[chart]: https://pro.ant.design/components/Charts-cn/

发表评论取消回复

表情：

评论列表（有 0 条评论，449人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECharts数据可视化项目-大屏数据可视化展示-echarts 图表制作

一.课程[技术栈][Link 1] ![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAY

我就是我/ 2024年04月01日 17:53/ 0 赞/ 137 阅读

相关 Echarts数据可视化第1章全面认识Echarts 1.3 Echarts vs Highcharts

Echarts数据可视化文章目录 Echarts数据可视化第1章全面认识Echarts 1

不念不忘少年蓝@/ 2024年03月26日 16:52/ 0 赞/ 79 阅读

相关 G2 可视化引擎-统计图表

[G2 可视化引擎][G2] G2 一套面向常规统计图表，以数据驱动的高交互可视化图形语法，具有高度的易用性和扩展性。使用 G2，你可以无需关注图表各种繁琐的实现细节，一

雨点打透心脏的1/2处/ 2023年02月16日 06:27/ 0 赞/ 1 阅读

相关 3D可视化（互联网）

3D可视化（互联网） 1 介绍应用行业智慧城市智慧园区智慧交通智慧警务（安防）

以你之姓@/ 2023年01月10日 11:46/ 0 赞/ 149 阅读

相关 Echarts数据可视化：图表篇（2）—— 折线图、堆叠面积折线图

[项目地址][Link 1] 介绍折线图是用折线将各个数据点连接起来的图表，一般用于展示数据变化的趋势。区域图则是在折线图的基础上，将指定的区域填充上颜色

迷南。/ 2022年10月01日 05:56/ 0 赞/ 1549 阅读

相关可视化库 D3.js

D3 是最流行的可视化库之一，它被很多其他的表格插件所使用。它允许绑定任意数据到DOM，然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HTML表格

电玩女神/ 2022年07月16日 23:41/ 0 赞/ 227 阅读

相关数据可视化2---3D坐标轴

import matplotlib.pyplot as plt import numpy as np import matplotlib as mpl

￡神魔★判官ぃ/ 2022年06月08日 13:18/ 0 赞/ 256 阅读

相关数据可视化实战：使用D3设计交互式图表

《数据可视化实战：使用D3设计交互式图表》基本信息原书名：Interactive data visualization for the Web 作者： (美)Scot

落日映苍穹つ/ 2022年03月31日 02:21/ 0 赞/ 297 阅读

相关 D3 vs G2 vs Echarts以及其他可视化图表

初次接触 web 图表开发的工程师，面对众多的可视化工具库难免会有疑惑，比如说：这库的产品定位？哪个更好学？哪个更强大？让我们带着问题，从这三个库的命名出发，比

绝地灬酷狼/ 2021年09月18日 23:40/ 0 赞/ 450 阅读

相关 ECharts数据可视化——图表展示制作内容介绍

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

待我称王封你为后i/ 2021年07月25日 13:29/ 0 赞/ 713 阅读