ECharts v3.7 发布:富文本标签、可滚动图例

在 ECharts 新发布的 3.7 版本 中,广泛地增加了标签的表现力。可以支持定制文本块的样式,也支持对文本片段应用特定的样式,如设置颜色、大小、背景、图片、对齐方式等,从而可以做出丰富的效果。另外增加了可滚动的图例,从而对图例过多显示不下的问题,提供了一种解决方案。


富文本标签

原先 echarts 中的文本标签,只能对整块统一进行样式设置,并且仅仅支持颜色和字体的设置,从而导致不易于制作表达能力更强的文字描述信息。

echarts v3.7 以后,支持了富文本标签,能够:

例如:


其他一些例子:

Map Labels, Pie Labels, Gauge.


为了支持这些样式设置,echarts 提供了丰富的文本配置属性,包括:

详情参见教程:富文本标签


可滚动图例

有不少人会遇到这种问题:图例项数过多,导致覆盖住下面的图,或者甚至超出可视区域,难看而不可接受。之前遇到这种问题时,会建议大家自己使用 HTML 来实现外置的图例,调用 echarts 提供的图例相关 API 完成和 echarts 交互。但是,自己实现,毕竟有开发量,所以,终于在这个版本中,给出了一种能翻页图例控件,为这类问题提供了一种可选择的解决方案。

水平的图例:
垂直的图例:

PS:上面这个是饼图使用的反面教材

具体设置,可参见:legend.type


标签文本配置的扁平化

在 echarts 中有众多的 textStyle 设置,例如 series-bar.label.normal.textStylexAxis.axisLabel.textStyle 等等。这些 textStyle 有些层级过深和语法冗余,导致不方便,所以进行了扁平化,去掉了他们的 textStyle 这个层级。

也就是说,从前是这种写法:label.normal.textStyle.fontSizeaxisLabel.textStyle.fontSize

v3.7 之后,推荐这种写法 label.normal.fontSizeaxisLabel.fontSize

当然,之前的写法仍然被兼容。

有这些地方进被扁平化了:


此外,还有一些其他的细节增强和 BUG FIX,例如:

更多的升级信息,参见 changelog

知识共享许可协议