---

layout: post enUrl: ‘2017/08/16/new-release-en.html’ title: ECharts v3.7 发布：富文本标签、可滚动图例 description: "在 ECharts 新发布的 3.7 版本中，广泛地增加了标签的表现力，可以支持定制文本块的样式，也支持对文本片段应用特定的样式，如设置颜色、大小、背景、图片、对齐方式等，从而可以做出丰富的效果。另外增加了可滚动的图例，从而对图例过多显示不下的问题，提供了一种解决方案。 tags: [新版本, 扩展, 教程] lazyLoad: true image: feature: post/2017-08-16-banner.png

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

---

富文本标签

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

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

• 定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。
• 对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。
• 在文本中使用图片做小图标或者背景。
• 特定组合以上的规则，可以做出简单表格、分割线等效果。

例如：

其他一些例子：

[Map Labels]({{ site.url_ec_examples_view_cn }}?c=map-labels&edit=1&reset=1), [Pie Labels]({{ site.url_ec_examples_view_cn }}?c=pie-nest&edit=1&reset=1), [Gauge]({{ site.url_ec_examples_view_cn }}?c=gauge-car&edit=1&reset=1).

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

• 字体基本样式设置：fontStyle, fontWeight, fontSize, fontFamily。
• 文字颜色：color。
• 文字描边：textBorderColor, textBorderWidth。
• 文字阴影：textShadowColor, textShadowBlur, textShadowOffsetX, textShadowOffsetY。
• 文本块或文本片段大小：lineHeight, width, height, padding。
• 文本块或文本片段的对齐：align, verticalAlign。
• 文本块或文本片段的边框、背景（颜色或图片）：backgroundColor, borderColor, borderWidth, borderRadius。
• 文本块或文本片段的阴影：shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY。
• 文本块的位置和旋转：position，distance, rotate。

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

---

可滚动图例

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

水平的图例：

垂直的图例：

具体设置，可参见：legend.type。

---

标签文本配置的扁平化

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

也就是说，从前是这种写法：label.normal.textStyle.fontSize、axisLabel.textStyle.fontSize。

v3.7 之后，推荐这种写法 label.normal.fontSize、axisLabel.fontSize。

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

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

---

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

• [+] 对于时间坐标轴（即 axis.type 为 'time'）支持了 minInterval。对于时间坐标轴和数值坐标轴（即 axis.type 为 'value'）支持了 maxInterval，从而能控制缩放（如 dataZoom）时刻度的最大最小范围。

• [+] 支持了 xAxis.axisLine.onZeroAxisIndex，从而能在多轴并且需要轴 onZero 的场景下，灵活设置轴互相的对应关系。参见 #5069。

• [+] 支持了 自定义系列(custom series) 不使用 坐标系。

• [+] 支持了柱状图标签的旋转。参见 rotate、align、verticalAlign。参见 #5309。

• [+] 支持了 radar.indicator.color，从而雷达每个标签能设置不同颜色。参见 #6128。

• [+] 支持了 dataZoom.rangeMode，从而能在数据更新时固定缩放区域。参见 #6128。

• [+] 支持了 action.legend.legendToggleSelect, action.legend.legendSelect, action.legend.legendUnSelect 中使用 dataIndex。参见 #4242。

• [+] 支持了 map.label.formatter，从而方便于在地图系列中使用富文本标签。参见：地图标签。

更多的升级信息，参见 changelog。