echarts formatter_玩转ECharts之实现“动态颜色的Label”

前言

玩转ECharts系列，主要为大家讲解我们基于ECharts如何实现企业级大屏项目中较为常用的各种奇奇怪怪的图表，接下来我们将通过几篇文章从基础图表开始为大家详细讲解实现这些图表样式的一些“小心机”。

导读

阅读完此文，你会了解基于ECharts： 1、如何实现在Label上显示数据项的值 2、如何实现动态颜色的Label 3、如何实现自定义的Label装饰 4、如何实现饼图Label标签的左右对称

背景       

观察以上默认饼图我们会发现：通常默认的Label颜色是跟随数据项的，且仅显示数据项的名称。这时会带来一些 问题：

1. 读者只能获取大致比例，无法获取精确的数据。
2. 增加数据显示后数据值和名称颜色无区分，读者获取数据不够快速，不够精确。

为了解决这些问题，我们提供一些 解决方案：

1. 在显示数据项目名称的同时显示具体的百分比。
2. 为了快速区分数据项目名称和百分比，给数据项名称和百分比赋予不同颜色。
3. 可以增加一些装饰性的元素去标注具体的名称或百分比(由于有些场景是仅显示数据项名称、有些场景是同时显示数据项名称和百分比，所以这里我们采用的是标注数据项名称)。

接下来我们来尝试一步一步实现我们的解决方案，看它到底是否有效。如图所示，采用新的方案优化了常用的饼图，为了快速获取饼图各项数值，我们分别显示了数据名称和百分比并用不同的颜色区分、增加装饰性边框来标注数据项名称增加区分度。

注意：为了突出label本文中示例图片特意相对缩小了饼图的半径，实际业务中如非必要请勿如此。

             

知识点

在 rich 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。 formatter是一个字符串，可以定义label的整体结构并且支持字符串模板。rich为一个对象，定义具体的元素样式。

字符串模板

字符串模板 模板变量有：

• {a}：系列名。

• {b}：数据名。

• <