DayDay's Studio.

Echarts Custom Series

前端 echarts
字数统计: 816阅读时长: 3 min
2021/04/04 Share

Echarts Custom series

工作上一直都有在用 Echarts，但是基本上都是使用 Echarts 预设好的 series，例如 bar、line、pie，然而最近因为工作需要，尝试使用了 custom 自定义图表，有必要记录一下。

renderItem

custom series 大致设定上与其他 series 区别不大，详情可看配置项文档，最关键的设定就是 renderItem，全靠它实现我们的自定义图像渲染逻辑。

renderItem 是一个函数，依据传入 series 的 data ，遍历并返回对应的渲染逻辑，它包含 params 和 api 这两个参数，需要当前数据属性和坐标系属性就从 params 中拿，需要获取当前数据维度值或将数据映射到坐标系中就从api 中拿对应的函数。

如官方配置项文档所说，api.coord 和 api.size 这两个函数很常用，前者传入数据得到对应映射到坐标系的坐标点，后者传入数据得到对应映射到坐标系的长度，当然还有 api.value ，可以通过这个拿到当前数据value。

除了数据映射之外，我们还需要通过 echarts.graphic 中的函数生成要渲染的图形，例如想渲染矩形则使用 echarts.graphic.clipRectByRect。

准备好上述内容之后，就可以设定 返回值了，可以返回 rect 、line 等。

关于数据映射的理解

自己写的时候对文档中描述的数据映射的概念特别模糊，但后面想想其实很简单，示例代码如下：

1
2
3
4
5
renderItem(params, api) {
	var coord = api.coord([0, 1]);
    console.log(coord[0]) // x 轴上第一个刻度的坐标点的横坐标值
    console.log(coord[1]) // y 轴为第二个刻度的坐标点的纵坐标值
}

上述代码我将[0, 1] 作为参数传入 api.coord 中，分别得到 x 轴上第一个刻度的坐标点的横坐标值和 y 轴为第二个刻度的坐标点的纵坐标值。

需要留意的地方

  • 把 0 作为参数传入 api.coord 和 api.size ，会返回 x 轴或 y 轴第一个刻度的数据信息，并不是原点。
  • 把非整数作为参数传入 api.coord 和 api.size ，参数会先进行取整，再进行换算，例如，0 和 0.5 得到的结果是一样的。
  • api.value 的参数不能超过 3，无论当前 data 的 value 数组的长度是否超过 3 。

series

Custom Series 大致设定与其他 Series 类似，但需特别注意 encode 的设定，这个设定非常重要，忽略这个设定可能会导致绘制的图片超出坐标系范围，造成图像的缺失。

encode 在 教程 中也有说明，实例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
option = {
    series: [{
        type: 'custom',
        renderItem: function () {
            ...
        },
        encode: {
            // data 中『维度1』和『维度2』对应到 X 轴
            x: [1, 2],
            // data 中『维度0』对应到 Y 轴
            y: 0
        },
        data: [
            // 维度0  维度1  维度2  维度3
            [   12,   44,   55,   60   ], // 这是第一个 dataItem
            [   53,   31,   21,   56   ], // 这是第二个 dataItem
            [   71,   33,   10,   20   ], // 这是第三个 dataItem
            ...
        ]
    }]
};

案例

这边自己写了一个 demo，生成如下图表，看过源码之后会对上述内容有更好的理解：
demo

原文作者：DayDay

原文链接：https://trcat.github.io/2021/04/04/Echarts-Custom-Series/

发表日期：April 4th 2021, 10:56:38 pm

更新日期：December 13th 2021, 10:35:58 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. Echarts Custom series
    1. 1.1. renderItem
      1. 1.1.1. 关于数据映射的理解
      2. 1.1.2. 需要留意的地方
    2. 1.2. series
    3. 1.3. 案例
Total : 20
2021
2020
Apple Music iPhone css 前端 echarts Git 搬运 SVG WebFont 工具 javascript es6 react-native react html svg canvas jquery vue 转载 欢迎
手机应用 计算机技术 闲谈 置顶