数据可视化工具对比

发表于 2021-03-31 更新于 2024-05-09 分类于前端阅读次数：

常见到的数据可视化工具

Echarts JavaScript 实现的开源可视化库
AntV 蚂蚁集团数据可视化团队
D3.js 将强大的可视化组件和数据驱动的 DOM 操作方法完美结合。
vega 华盛顿大学计算机学院数据交互实验室（IDL）开发的一套交互图形语法
HighCharts 纯 JavaScript 编写的图表库
FineBI 新一代自助大数据分析的BI软件

以上几种中商用收费的有HighCharts和FineBI，不考虑使用这两款产品，以下的对比忽略这两个;

兼容性

Echarts 兼容 IE6 及以上的所有主流浏览器，同样支持移动端的缩放和手势操作。
D3.js 兼容IE9 及以上的所有主流浏览器，对于移动端的兼容性也同上。
Antv 不详

渲染方式

第三方库都是基于这两种浏览器图形渲染技术实现的： Canvas 和 SVG 。下面是它们的区别：

SVG	Canvas
不依赖分辨率	依赖分辨率
支持事件处理器	不支持事件处理器
最适合带有大型渲染区域的应用程序(如地图)	弱的文本渲染能力
复杂度高会减慢渲染速度(任何过度使用DOM的应用都不快)	能够以.png或.jpg格式保存结果图像
不适合游戏应用	最适合图像密集型的游戏
可以为某个元素附加JavaScript事件处理器。在SVG 中，每个被绘制的图形均被视为对象。	一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景都需要重新绘制。

SVG渲染:

vega
D3.js

ECharts v4.0 发布了 SVG 渲染器，也可以支持SVG渲染。
AntV中G2既支持SVG渲染也支持Canvas渲染

优缺点对比

1. Ecahrts

优点：

易上手，文档详细
移动端优化，交互和布局适配，按需打包
配置项驱动，三级个性化图表样式管理
丰富的图表类型，覆盖主流常规的统计图表
深度的交互式数据探索
地理特效（百度迁徙，百度人气，公交轨迹等效果）

缺点：

复杂关系型图表比较难定制
灵活性上不如 Vega 等基于图形语法的类库

2. AntV

AntV分类：

G2 强大的语义化图表语法类库（主要用到的）
F2 移动可视化方案
G6 提供了基本的网图和树图功能，并支持多种内置布局
X6 图编辑引擎
L7 地理空间数据可视化
等等

G2优点：

数据处理能力、便利的扩展方式和强大交互能力；
可以按需加载
支持canvas和svg

G2缺点:

文档说明有点简略了
需要学习相对应的语法，学习成本相对来说有点高

3. Vega

优点:

完全基于 JSON 语法，提供从数据到图形的映射规则
支持常见的交互语法

缺点:

没有中文文档
复杂的语法设计，使用和学习成本很高

Echarts按需加载

5.0以后版本按需加载的方式是import，4.9版本是使用require进行按需加载的
以下例子都是按照饼状图为例

5.0版本

按需加载的方式

import * as echarts from "echarts/core";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import {
  PieChart
} from 'echarts/charts';
import {
  CanvasRenderer
} from 'echarts/renderers';

echarts.use(
  [TitleComponent, TooltipComponent, LegendComponent, PieChart, CanvasRenderer]
);

TypeScript版按需加载

import * as echarts from 'echarts/core';
import {
    BarChart,
    // 系列类型的定义后缀都为 SeriesOption
    BarSeriesOption,
    LineChart,
    LineSeriesOption
} from 'echarts/charts';
import {
    TitleComponent,
    // 组件类型的定义后缀都为 ComponentOption
    TitleComponentOption,
    GridComponent,
    GridComponentOption
} from 'echarts/components';
import {
    CanvasRenderer
} from 'echarts/renderers';

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<
  BarSeriesOption | LineSeriesOption | TitleComponentOption | GridComponentOption
>;

// 注册必须的组件
echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]
);
var option: ECOption = {
    ...
}

4.9版本

按需加载的方式

const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/pie');

require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require("echarts/lib/component/legend");

5.0.2和4.9.0按需加载前后对比

版本	未按需加载	按需加载	节省空间比例
5.0.2	2.92MB	1.09MB	63%
4.9.0	2.55MB	0.91MB	64%

5.0和4.9版本地图用法

4.9使用地图的方式

import * as echarts from "echarts";
import 'echarts/map/js/china.js';
var chart = echarts.init(document.getElementById('main'));
const option = {
  ...
  series: [
        {
          name: 'iphone',
          type: 'map',
          mapType: 'china',
          ...
        }]
}

5.0中移除了内置的 geoJSON（原先在 echarts/map 文件夹下），如果使用者仍然需要他们，可以去从老版本中得到（下载文件中的map文件，引入本地），或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts 中。

import * as echarts from "echarts";
import chinaJson from "./china.json"; // 引入中国地图数据

var chart = echarts.init(document.getElementById('main'));
echarts.registerMap('china', chinaJson);

const option = {
  ...
  series: [
        {
          name: 'iphone',
          type: 'map',
          map: 'china',
          ...
        }]
}