数据可视化工具库比较与应用：ECharts、AntV、D3、Zrender

ECharts

ECharts是一个由百度开发的强大的数据可视化库，它提供了丰富的图表类型和灵活的配置选项。以下是一个简单的示例，展示如何使用Echarts创建一个折线图：

import * as echarts from 'echarts';

const chartDom = document.getElementById('main');

const myChart = echarts.init(chartDom);


const option = {

  xAxis: {

    type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

  },

  yAxis: {

    type: 'value'

  },

  series: [

    {
data: [150, 230, 224, 218, 135, 147, 260],

      type: 'line'

    }

  ]

};


option && myChart.setOption(option);

如上步骤，简单易用，难点都封装好了，只需要配置数据即可。如果需要在网页中快速展示图表信息，刚好这个图表是比较常规的，不需要过多地调整和配置，就可以采用ECharts。

Antv

Antv是蚂蚁金服开发的数据可视化库，它基于G2和G6，提供了一系列强大的图表和可视化组件。下面是一个使用Antv使用G2产品创建折线图的示例：

import { Chart } from "@antv/g2";

const chart = new Chart({ container: "container" });


chart.options({
type: "view",
autoFit: true,
data: [

    { year: "1991", value: 3 },

    { year: "1992", value: 4 },

    { year: "1993", value: 3.5 },

    { year: "1994", value: 5 },

    { year: "1995", value: 4.9 },

    { year: "1996", value: 6 },

    { year: "1997", value: 7 },

    { year: "1998", value: 9 },

    { year: "1999", value: 13 },

  ],
encode: { x: "year", y: "value" },
scale: { x: { range: [0, 1] }, y: { domainMin: 0, nice: true } },
children: [

    { type: "line", labels: [{ text: "value", style: { dx: -10, dy: -12 } }] },

    { type: "point", style: { fill: "white" }, tooltip: false },

  ],

});


chart.render();

Antv提供了简单易用的API和丰富的图表组件，可以帮助开发者快速构建各种类型的数据可视化图表。在官网可以看到由七个模块产品，分别是：

G2｜G2Plot：可视化图形语法和通用图表库

S2：多维可视分析表格

G6｜Graphin：关系数据可视化分析工具和图分析组件

X6｜XFlow：流程图相关分图表和组件

L7｜L7Plot：地理空间数据可视化框架和地理图表

F2｜F6：移动端的可视化解决方案

AVA：可视分析技术框架

D3

D3(d3js.org/getting-sta…

import * as d3 from "d3";

import {useRef, useEffect} from "react";


export default function LinePlot({

  data,
width = 640,
height = 400,
marginTop = 20,
marginRight = 20,
marginBottom = 30,
marginLeft = 40

}) {

  const gx = useRef();

  const gy = useRef();

  const x = d3.scaleLinear([0, data.length - 1], [marginLeft, width - marginRight]);

  const y = d3.scaleLinear(d3.extent(data), [height - marginBottom, marginTop]);

  const line = d3.line((d, i) => x(i), y);

  useEffect(() => void d3.select(gx.current).call(d3.axisBottom(x)), [gx, x]);

  useEffect(() => void d3.select(gy.current).call(d3.axisLeft(y)), [gy, y]);

  return (

    <svg width={width} height={height}>

      <g ref={gx} transform={`translate(0,${height - marginBottom})`} />

      <g ref={gy} transform={`translate(${marginLeft},0)`} />

      <path fill="none" stroke="currentColor" strokeWidth="1.5" d={line(data)} />

      <g fill="white" stroke="currentColor" strokeWidth="1.5">

        {data.map((d, i) => (<circle key={i} cx={x(i)} cy={y(d)} r="2.5" />))}

      </g>

    </svg>

  );

}

D3不是传统意义上的图表库，是由30个离散库或者模块组成的套件。如果你对其它高级图表库不满意，想使用SVG或Canvas、甚至WebGL滚动自己的图表，那么可以使用D3工具库。

ZRender

ZRender是2D绘图引擎。它提供Canvas、SVG、等多种渲染方式，也是ECharts的渲染器。

import zrender from 'zrender';
var zr = zrender.init(document.getElementById('main'));
var circle = new zrender.Circle({
shape: {
cx: 150,
cy: 50,
r: 40

    },
style: {
fill: 'none',
stroke: '#F00'

    }

});

zr.add(circle);

console.log(circle.shape.r); // 40

circle.attr('shape', {
r: 50 // 只更新 r。cx、cy 将保持不变。

});

通过 a = new zrender.XXX 方法创建了图形元素之后，可以用 a.shape 等形式获取到创建时输入的属性，但是如果需要对其进行修改，应该使用 a.attr(key, value) 的形式修改，否则不会触发图形的重绘。

从代码规范看，Echarts和D3官网的案例有用到es5的语法，Antv遵循了es6的语法规范，更专业。从灵活程度和使用难易程度来看，ECharts<Antv<D3<ZRender。还有使用到其它图表工具库的，欢迎留言探讨📒