echarts 圖例文字顏色與圖例一致的配置，以及圖例文字多種顏色的配置

echarts  中   圖例文字的顏色默認是黑色，通常我們配置圖例文字顏色有兩種方式：

一、在lengend 中配置data屬性，data里面定義各圖例的文本，以及該文本對應的樣式，這里的文本就與option中的series中的data 重復了，【echart實際上的圖例數據是根據series中的data來的】，而一般series中的data數據是從接口獲取的，不固定。所以不建議用這種方式

legend: {
          orient: 'vertical', //圖例列表的布局朝向（垂直排列）
          left: '50%',
          y: 'center',
          itemGap: 30,
          itemWidth: 8,
          padding: 10,
          textStyle: {
            fontSize: 12,
            color: '#FFFFFF',
          },
          align: 'left',
          data: [
            // '待下發','處置中','已完成'
            {
              name: '待下發',
              icon: 'circle',
              textStyle: {
                    color: 'red'          // 圖例文字顏色
               }
            },
            {
              name: '處置中',
              icon: 'circle',
              textStyle: {
                    color: 'yellow'          // 圖例文字顏色
               }
            },
            {
              name: '已完成',
              icon: 'circle',
              textStyle: {
                    color: 'pink'          // 圖例文字顏色
               }
            },
          ],

 

二、在lengend 中通過formmatter函數配合textStyle中的屬性rich富文本來格式化處理樣式或者內容等

formatter: function (name) {
            var total = 0
            var target
            for (var i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value
              }
            }
            var arr = ['{a|' + name + ' :}{b|' + target + '}{a|個}']
            return arr.join('\n')
          },
          textStyle: {
            rich: {
              a: {
                fontSize: 14,
                fontFamily: 'Microsoft YaHei',
                fontWeight: 400,
                color: '#FFFFFF',
                align: 'left',
                padding: [0, 0, 0, 10],
              },
              b: {
                fontSize: 26,
                fontFamily: 'DIN',
                fontWeight: 'bold',
                color: '#3F98FD',
                align: 'right',
                padding: [0, 0, 0, 10],
                lineHeight: 25,
              }
            }
          }

 

如果要設置圖例文字顏色與圖例一致的話，直接設置textStyle的 color為'auto'即可

 

但是使用 color為'auto'需要注意的是，如果需要對文字樣式進行格式化處理的話，必須把自定義樣式rich放在后面，否側color為'auto'會被覆蓋

效果如下

 

 

 

 

 

 

 如果UI效果非要讓圖例文字前半部分顏色固定，而后半部分文字顏色與圖例顏色一致【不建議這種UI效果】，解決方法同樣是最上面的2兩種方式：

一、在lengend 中配置data屬性，data里面定義各圖例的文本，以及該文本對應的樣式：

 

 

 

二、在farmatter中做if判斷處理，當然這種不好的地方就是要一個個判斷並對每一個圖例進行富文本樣式處理：