SZ 博客

忠于理想 忠于技术

0%

图表引擎调研-编辑器接入

发表于 分类于 ， 阅读次数：

图表引擎调研-编辑器接入

本文主要调研一些开源的底层图表库，评估其易用性、灵活性、可定制性、以及接入charts-studio的难易程度。目的是评估图表工具的底层引擎是是否需要更换，能否为图表工具选择一个灵活且高效的底层引擎。

项目详情见：chart-lib-learn

ECharts

NPM下载量 :322,525

书写习惯-Demo[基础折线图]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
option = {
    // 定义x轴
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    // 定义y轴
    yAxis: {
        type: 'value'
    },
    // 定义数据
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

可定制性

该部分会去实现是一个LCharts目前已有的高度定制化的图表，通过具体实现代码来评估可定制性。

image-20210705093404775

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<script>
import * as echarts from "echarts";
import { data, color, startAlpha, endAlpha, getCoordinates } from "../utils.js";
export default {
  name: "QuickStart",
  mounted() {
    const chartDom = this.$refs["charts-dom"];
    const myChart = echarts.init(chartDom);

    /**
     * 给数据写入 样式(线性渐变)
     *
     * @param {*} datas 数据
     * @param {*} colorlist 颜色列表
     * @param {*} startAlpha 开始颜色的透明度
     * @param {*} endAlpha 结束颜色透的明度
     * @returns 带样式的数据
     */
    function setGradientColorInItemSyle(
      datas,
      colorlist,
      startAlpha,
      endAlpha
    ) {
      for (let i = 0; i < datas.length; i++) {
        const color = colorlist[i];
        const startArc = datas[i]._startArc;
        const endArc = datas[i]._endArc;
        // 这里计算了 线性渐变的起止方向
        const coordinates = getCoordinates(startArc, endArc);
        datas[i].itemStyle = {
          color: {
            ...coordinates,
            type: "linear",
            global: false,
            // 这里给了 线性渐变的起止颜色
            colorStops: [
              {
                offset: 0,
                color: `rgba(${color.r}, ${color.g}, ${color.b}, ${startAlpha})`,
              },
              {
                offset: 1,
                color: `rgba(${color.r}, ${color.g}, ${color.b}, ${endAlpha})`,
              },
            ],
          },
        };
      }
      return datas;
    }

    const option = {
      color: [
        "#1576d2",
        "#d14a82",
        "#26c1f2",
        "#a166ff",
        "#1271cc",
        "#272f67",
        "#9C2BB6",
      ],
      tooltip: {
        show: true,
        textStyle: {
          color: "#fff",
          fontSize: 15,
          fontFamily: "微软雅黑",
        },
      },

      series: [
        {
          type: "pie",
          data: setGradientColorInItemSyle(data, color, startAlpha, endAlpha),
          animation: false,
          radius: ["50%", "75%"],
          center: ["50%", "50%"],
          itemStyle: {
            linearGradient: true,
          },
          hoverAnimation: false,
          label: {
            nameColor: "#CACACA",
            valueColor: "color",
            labelStyle: "style2",
            fontSize: 20,
            formatter: function formatterFunc(params) {
              const values = params.data; // 内容
              const formatter = [
                `{rect|}{name|${values.name}} ${values.value}%`,
                `${values.value}% {name|${values.name}}{rect|}`,
              ];
              // 这里拿到了开始角度和结束角度，计算了一个label指示线的标注角度
              const midAngle = (values._startArc + values._endArc) / 2;
              // 分情况判断了一下 决定采用左边的还是右边的
              if (midAngle <= Math.PI) {
                return formatter[0];
              } else {
                return formatter[1];
              }
            },
            rich: {
              name: {
                color: "#fff",
                borderColor: "#264884",
                borderWidth: 1,
                padding: [10, 15],
              },
              rect: {
                height: 12,
                width: 8,
                backgroundColor: "#264884",
              },
            },
            opacity: 1,
            position: "outside",
            matchColor: true,
          },
          labelLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
      ],
    };

    option && myChart.setOption(option);
  },
};
</script>

适配表单式编辑成本

总体低

echarts数据的样式主要在series中定制化样式需要重写每个数据项内部的style，这里需要一个由单个配置项映射到多个数据项样式的渠道（即LCharts）。由于有echarts的上层建筑LCharts的存在提供了高级配置项总体适配成本为低。

其他问题

echarts构建图表的方式为自顶向下对图表元素进行拆分，对拆分到的细节进行参数化配置，未拆分到的细节则不能进行参数化配置，会导致该部分样式无法定制。

G2

NPM下载量 :84,547

书写习惯-Demo[基础折线图]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
const 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 },
];
// 初始化图表
const chart = new Chart({
  container: 'container',
  autoFit: true,
  height: 500,
});
// 绑定数据
chart.data(data);
// 设置映射
chart.scale({
  year: {
    range: [0, 1],
  },
  value: {
    min: 0,
    nice: true,
  },
});
// 设置提示框
chart.tooltip({
  showCrosshairs: true, // 展示 Tooltip 辅助线
  shared: true,
});
// 折线图、展示year和value维度 label为value
chart.line().position('year*value').label('value');
// 折线图的节点装饰
chart.point().position('year*value');
// 渲染图表
chart.render();

可定制性

image-20210705093524455

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<script>
import { Chart } from "@antv/g2";
import { data, color, startAlpha, endAlpha, getCoordinates } from "../utils.js";

export default {
  mounted() {
    const chartDom = this.$refs["charts-dom"];
    const findIndex = function (name) {
      for (let i = 0; i < data.length; i++) {
        if (name === data[i].name) {
          return i;
        }
      }
      return 0;
    };
    const chart = new Chart({
      container: chartDom,
      autoFit: true,
      height: 500,
    });
    chart.data(data);
    chart.scale("sales", {
      nice: true,
    });
    chart.coordinate("theta", {
      radius: 0.8,
      innerRadius: 0.65,
    });
    chart
      .interval()
      .adjust("stack")
      .position("value")
      .color("name", (name) => {
        const index = findIndex(name);
        let colorI = color[index];
        let dataI = data[index];
        const coordinates = getCoordinates(dataI._startArc, dataI._endArc);
        const itemColor = `l(${parseInt(coordinates.angle)}) 0:rgba(${
          colorI.r
        }, ${colorI.g}, ${colorI.b}, ${startAlpha}) 1:rgba(${colorI.r}, ${
          colorI.g
        }, ${colorI.b}, ${endAlpha})`;
        return itemColor;
      })
      .label("value", {
        htmlTemplate: function formatter(val, item) {
          return item.point.item + ": " + val;
        },
        offset: 10,
        textStyle: {
          fontSize: 20,
          fill: "red",
        },
        label: {
          fontSize: 20,
          fill: "red",
        },
        labelLine: {
          lineWidth: 10, // 线的粗细
          stroke: "#ffffff", // 线的颜色
        },
      });
    chart.legend("name", false);
    chart.render();
  },
  data: function () {
    return {
      color: color,
    };
  },
};
</script>

适配表单式编辑成本

中

g2声明编码式的书写方式导致仍然需要对g2封装一层(g2Plot)才能实现通过高级配置项对底层数据项的修改。

其他问题

G2目前似乎还在快速更新期，各个版本之间的API差异较大，文档不是特别完善。

G2Plot

NPM下载量 :46,738

书写习惯-Demo[基础折线图]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const 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 },
];

const line = new Line('container', {
  // 绑定数据
  data,
  padding: 'auto',
  // 设置x轴维度
  xField: 'year',
  // 设置y轴维度
  yField: 'value',
  // 设置x轴属性
  xAxis: {
    // type: 'timeCat',
    tickCount: 5,
  },
});

line.render();

可定制性

image-20210705093556238

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script>
import { Pie } from "@antv/g2plot";
import { data, color, startAlpha, endAlpha, getCoordinates } from "../utils.js";

export default {
  name: "QuickStart",
  mounted() {
    const chartDom = this.$refs["charts-dom"];
    const findIndex = function (name) {
      for (let i = 0; i < data.length; i++) {
        if (name === data[i].name) {
          return i;
        }
      }
      return 0;
    };
    const piePlot = new Pie(chartDom, {
      data,
      angleField: "value",
      colorField: "name",
      statistic: {
        title: false,
        content: false,
      },
      color: ({ name }) => {
        const index = findIndex(name);
        let colorI = color[index];
        let dataI = data[index];
        const coordinates = getCoordinates(dataI._startArc, dataI._endArc);
        const itemColor = `l(${parseInt(coordinates.angle)}) 0:rgba(${
          colorI.r
        }, ${colorI.g}, ${colorI.b}, ${startAlpha}) 1:rgba(${colorI.r}, ${
          colorI.g
        }, ${colorI.b}, ${endAlpha})`;
        return itemColor;
      },
      pieStyle: {
        lineWidth: 0,
      },
      innerRadius: 0.65,
      legend: false,
      radius: 0.8,
    });

    piePlot.render();
  },
};
</script>

适配表单式编辑成本

中低

其他问题

同G2

vega

NPM下载量 :75,493

书写习惯-Demo[基础折线图]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic area chart example.",
  "width": 500,
  "height": 200,
  "padding": 5,
      
  // 数据
  "data": [
    {
      "name": "table",
      "values": [
        {"u": 1,  "v": 28}, {"u": 2,  "v": 55},
        {"u": 3,  "v": 43}, {"u": 4,  "v": 91},
        {"u": 5,  "v": 81}, {"u": 6,  "v": 53},
        {"u": 7,  "v": 19}, {"u": 8,  "v": 87},
        {"u": 9,  "v": 52}, {"u": 10, "v": 48},
        {"u": 11, "v": 24}, {"u": 12, "v": 49},
        {"u": 13, "v": 87}, {"u": 14, "v": 66},
        {"u": 15, "v": 17}, {"u": 16, "v": 27},
        {"u": 17, "v": 68}, {"u": 18, "v": 16},
        {"u": 19, "v": 49}, {"u": 20, "v": 15}
      ]
    }
  ],
   // 映射
  "scales": [
    {
        // 名称
      "name": "xscale",
        // 线性映射
      "type": "linear",
        // 映射到宽度
      "range": "width",
      "zero": false,
        // 域
      "domain": {"data": "table", "field": "u"}
    },
    {
      "name": "yscale",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {"data": "table", "field": "v"}
    }
  ],
    // 轴线配置
  "axes": [
    {"orient": "bottom", "scale": "xscale", "tickCount": 20},
    {"orient": "left", "scale": "yscale"}
  ],
    // 视觉映射
  "marks": [
    {
        // 线
      "type": "line",
      "from": {"data": "table"},
        // 编码
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "u"},
          "y": {"scale": "yscale", "field": "v"},
          "stroke": {"value": "steelblue"},
          "strokeWidth":{"value":2}
        }
      }
    }
  ]
}

可定制性

image-20210705093636190

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<script>
import * as vega from "vega";
import { data, color, startAlpha, endAlpha, getCoordinates } from "../utils.js";

export default {
  name: "QuickStart",
  mounted() {
    const createColorList = function () {
      const colorList = [];
      for (let i = 0; i < data.length; i++) {
        const dataI = data[i];
        const coordinates = getCoordinates(dataI._startArc, dataI._endArc);
        const startColor = `rgba(${color[i].r},${color[i].g},${color[i].b},${startAlpha})`;
        const endColor = `rgbs(${color[i].r},${color[i].g},${color[i].b},${endAlpha})`;
        colorList.push({
          gradient: "linear",
          x1: coordinates.x,
          y1: coordinates.y,
          x2: coordinates.x2,
          y2: coordinates.y2,
          stops: [
            { offset: 0.0, color: startColor },
            { offset: 1, color: endColor },
          ],
        });
      }
      console.log(colorList);
      return colorList;
    };
    const colorList = createColorList();
    console.log(colorList);
    const chartDom = this.$refs["charts-dom"];
    const viewData = vega.parse({
      $schema: "https://vega.github.io/schema/vega/v5.json",
      description: "A basic donut chart example.",
      width: chartDom.offsetWidth,
      height: chartDom.offsetHeight,
      // autosize: "fit",
      padding: 0,

      signals: [
        {
          name: "startAngle",
          value: 0,
        },
        {
          name: "endAngle",
          value: 6.29,
        },
        {
          name: "padAngle",
          value: 0,
        },
        {
          name: "innerRadius",
          value: 60,
        },
        {
          name: "cornerRadius",
          value: 0,
        },
        {
          name: "sort",
          value: false,
        },
      ],

      data: [
        {
          name: "table",
          values: data,
          transform: [
            {
              type: "pie",
              field: "value",
              startAngle: { signal: "startAngle" },
              endAngle: { signal: "endAngle" },
              sort: { signal: "sort" },
            },
          ],
        },
        {
          name: "colorList",
          values: colorList,
        },
      ],

      scales: [
        {
          name: "color",
          type: "ordinal",
          domain: { data: "table", field: "name" },
          range: { scheme: "category20" },
        },
      ],

      marks: [
        {
          type: "arc",
          from: { data: "table" },
          color: {},
          encode: {
            enter: {
              fill: { scale: "color", field: "name" },
              x: { signal: "width / 2" },
              y: { signal: "height / 2" },
            },
            update: {
              startAngle: { field: "startAngle" },
              endAngle: { field: "endAngle" },
              padAngle: { signal: "padAngle" },
              innerRadius: { signal: "height / 2 * 0.5" },
              outerRadius: { signal: "height / 2 * 0.75" },
              cornerRadius: { signal: "cornerRadius" },
            },
          },
        },
      ],
    });
    console.log(viewData);
    const view = new vega.View(viewData, {
      renderer: "svg", // renderer (canvas or svg)
      container: chartDom, // parent DOM container
      hover: true, // enable hover processing
    });
    view.runAsync();
  },
};
</script>

适配表单式编辑成本

中

其他问题

文档不友好，示例过少，使用熟练度过低

HighCharts

NPM下载量 :651,198

书写习惯-Demo[基础折线图]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
Highcharts.chart('container', {
   
    // y轴配置项
    yAxis: {
        title: {
            text: 'Number of Employees'
        }
    },
    // x轴配置项
    xAxis: {
        accessibility: {
            rangeDescription: 'Range: 2010 to 2017'
        }
    },
    // 图例配置项
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
    },
    
    // 绘制配置项
    plotOptions: {
        series: {
            label: {
                connectorAllowed: false
            },
            pointStart: 2010
        }
    },
    
    // 数据
    series: [{
        name: 'Other',
        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
    }],

});

可定制性

image-20210705093705970

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<script>
import { data, color, startAlpha, endAlpha, getCoordinates } from "../utils.js";
import Highcharts from "highcharts";
import Exporting from "highcharts/modules/exporting";
Exporting(Highcharts);

export default {
  name: "HigthCharts",
  mounted() {
    const createColorList = function () {
      const colorList = [];
      for (let i = 0; i < data.length; i++) {
        const dataI = data[i];
        const coordinates = getCoordinates(dataI._startArc, dataI._endArc);
        const startColor = Highcharts.Color(
          `rgb(${color[i].r},${color[i].g},${color[i].b})`
        )
          .setOpacity(startAlpha)
          .get("rgba");
        const endColor = Highcharts.Color(
          `rgb(${color[i].r},${color[i].g},${color[i].b})`
        )
          .setOpacity(endAlpha)
          .get("rgba");
        colorList.push({
          linearGradient: {
            x1: coordinates.x,
            y1: coordinates.y,
            x2: coordinates.x2,
            y2: coordinates.y2,
          },
          stops: [
            [0, startColor],
            [1, endColor], // darken
          ],
        });
      }
      console.log(colorList);
      return colorList;
    };

    const chartDom = this.$refs["charts-dom"];
    // 创建渐变色
    Highcharts.getOptions().colors = createColorList();
    console.log(Highcharts.getOptions().colors);
    data.forEach((d) => {
      d.y = d.value;
    });

    Highcharts.chart(chartDom, {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        backgroundColor: "transparent",
        plotShadow: false,
        type: "pie",
      },
      title: {
        text: null,
      },
      exporting: {
        enabled: false,
      },
      tooltip: {
        pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
      },
      accessibility: {
        point: {
          valueSuffix: "%",
        },
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          borderColor: "transparent",
          cursor: "pointer",
          dataLabels: {
            enabled: true,
            formatter: function () {
              return `<span style="color:${this.point.color}"> 值：${this.y}，占比${this.percentage}%</span>`;
            },
            connectorColor: "silver",
          },
        },
      },
      series: [
        {
          type: "pie",
          name: "Share",
          size: "80%",
          innerSize: "65%",
          keys: ["name", "value"],
          data,
        },
      ],
    });
  },
};
</script>

适配表单式编辑成本

中

其他问题

商业付费、API不够友好。

图表工具底层引擎期望

选项 期望 原因
写法 配置式 声明式和编码式的书写方式均不利于通过表单直接配置需要中间层做转义，转义难度递增。
默认渲染引擎 svg 1. svg先天以dom元素作为图元组成图表，利于图元选取。
2. 导出png,svg文件场景下svg转canvas(png),相较于canvas转png难度较低
开源 是
商业付费 否
适配表单配置难度 低
整体改造成本 低
定制性 高
动画友好性 高

基础引擎总结

引擎 写法 默认渲染引擎 开源 商业付费 适配表单配置难度 定制性 整体改造成本
ECharts 配置式 canvas 是 否 低 中 待评估
G2 声明式 canvas 是 否 高 中 待评估
G2Plot 配置式 G2 是 否 中低 中 待评估
HighCharts 配置式 svg 是 是 中 中高 待评估
vega 配置式 D3 是 否 中高 待详细调研 待评估

小结

从目前的调研结果来看，G2,G2Plot,HighCharts,vega。在可定制性上相较于echarts并没有本质上的提升，但在适配表单上会有较大的成本体现。这里暂时不更换图表工具的底层引擎，仍是采用对升级的方式弥补一些缺陷，对于一些及特殊类的细节配置点暂不提供支持计划。该方向上的调研会持续推进，以期在各图表库的使用熟练度提升后会有一些不同的结论。