echarts 饼图legend图例中添加自定义富文本样式

直接上图

效果图.右边就是 legend,上面的"无约束断面"几个字是我用p 标签定位上去的

需求

公司给的设计图就是如上图所示,图例中的字体颜色都是不一样的.找了官网示例发现写的不太清楚.
于是自己扒拉了一遍代码,总算写出了自己想要的样式.在此只贴上 legend 部分代码.

        legend: {
          orient: 'vertical',
            icon: "circle",
            x: '40%',
            y: 'center',
            textStyle: {
              color: '#FBFBFB',
              fontSize: 16,
              rich: {
                0: {
                  color: '#F1C40F',
                  fontSize: 32,
                  fontWeight: 700
                },
                1: {
                  color: '#65F7CB',
                  fontSize: 32,
                  fontWeight: 700
                },
              },
            },

            data: ['无约束越限', '无约束未越限'],
            formatter: function (val) {
              var index = 0;
              var datas = option.series[0].data;
              var totalNum = 0;
              datas.forEach(function (v, i) {
                totalNum += v.value;
              })
              var legendData = option.legend.data;
              legendData.forEach(function (v, i) {
                if (v == val) {
                  index = i;
                }
              })
              console.log(datas)//打印结果见下图
              return val + ' {' + index + '|' + datas[index].value + '} 个 | ' + ((datas[index].value / totalNum) * 100).toFixed(2) + '%';
            }
          }

这是datas打印结果

至于为什么要把rich 里的配置名称设为 0和 1,这是因为图例中文字上下的颜色是不一样的,所以我是根据索引来区分的.
而且我只有两组数据,所以只需要定义两种颜色,比较简单.
写出来之后回过头来再看官方文档就会恍然大悟了.
that's all~~