ECharts v3.6 发布:自定义系列、极坐标柱状图

在 ECharts 新发布的 3.6 版本中,新增了 自定义系列(custom series),能让用户定制渲染逻辑,从而在已有坐标系中创造新的图表。此外还有极坐标柱状图、自定义维度映射、dataZoom 等其他一些增强。

自定义系列

图表的类型多种多样,有些大众有些小众,echarts 难于内置得支持所有类型的图表。所以推出了 自定义系列(custom series)

自定义系列可以自定义系列中的图形元素渲染。从而能扩展出不同的图表。同时,echarts 会统一管理图形的创建删除、动画、与其他组件(如 dataZoomvisualMap)的联动,使用户不必纠结这些细节。

例如,下面的例子使用 custom series 扩展出了 x-range 图:

可以注意到,里面须用户自定义的渲染逻辑,在 renderItem 这个函数中,并不十分复杂。但是得到的功能是比较完备的。

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
var option = {
...,
series: [{
type: 'custom',
renderItem: function (params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;

return {
type: 'rect',
shape: echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}),
style: api.style()
};
},
data: data
}]
}
下面的两个例子使用 custom series 扩展出了 error-chart 图:

下面是其他一些例子:

极坐标柱状图

极坐标中的柱状图,可以按径向排布或者切向排布。

使用时,只需要将系列的 coordinateSystem 设置为 'polar',将原先笛卡尔坐标系中使用的 xAxisyAxis 替换成 radiusAxisangleAxis,就能使用极坐标系的柱状图了。

其他

此外,

更多的升级信息,参见 changelog

知识共享许可协议