echarts改变图例legend字体的颜色

设置rich的字体颜色

定义数组 legendRich ，循环colors设置rich的字体颜色
注意：option 中legend中------>formatter ----->datas.map((item, index){}

let datas = [
  { value: 10, name: '可燃气体', percent: '10' },
  { value: 10, name: '有毒气体', percent: '40' },
  { value: 4, name: '高温煤', percent: '30' },
  { value: 5, name: '高温气', percent: '20' }
]
var colors = ['#00c6ff', '#16f0a4', '#ffe400', '#ff9125']
let legendData = []
for (var j = 0; j < datas.length; j++) {
  var data = {
    name: datas[j].name,
    icon: 'circle',
  }
  legendData.push(data)
}
function array2obj (array, key) {
  var resObj = {}
  for (var i = 0; i < array.length; i++) {
    resObj[array[i][key]] = array[i]
  }
  return resObj
}
let objData = array2obj(datas, 'name')

// 图例的样式
let legendRich =  {
             title: {
              color: '#fff',
              fontSize: 14,
              padding: [0, 10, 0,0]
            },
            value: {
              color: '#',
              fontSize: 14,
            },
          }
colors.map((item, index) => {
        // console.log(item)
        legendRich["value"+index] = {
            fontSize: 16,
            lineHeight: 15,
            color: item
        };
    })

 option = {

   color:colors,
     backgroundColor: '#000',
     title: {
         text: '100',
        //  subtext: 7789,
         textStyle: {
             color: '#f2f2f2',
             fontSize: 40,
             fontFimly:"DIN"
         },

         x: 'center',
         y: 'center',
     },
     grid: {
         top: 100,
         left: 100,
         right: '10%'
     },
      legend: {
        orient: 'vertical',
        top: 'center',
        right: '3%',
        itemGap: 30,
        data: legendData,
        formatter: function (name) {
             let str = ``;
            datas.map((item, index) => {
                 console.log(item)
                if (item.name == name) {
                    str = `{title|${name}}  {${"value"+index}|${objData[name].value}}   {${"value"+index}|${objData[name].percent}%}`
                    
                }
            })
            return str;
            
        },
        color: '#fff',
        textStyle: {
          rich: legendRich
        }
      },
     series: [
         // 主要展示层的
         {
             radius: ['30%', '61%'],
             center: ['50%', '50%'],
             type: 'pie',
             label: {
                  show: false,
             },
    
             data: datas,

         },
         // 边框的设置
         {
             radius: ['30%', '34%'],
             center: ['50%', '50%'],
             type: 'pie',
             label: {
                 show: false
             },
        
             data: [{
                 value: 1,
                 itemStyle: {
                     color: "rgba(250,250,250,0.3)",
                 },
             }],
         }, {
             name: '外边框',
             type: 'pie',
             clockWise: false, //顺时加载
             hoverAnimation: false, //鼠标移入变大
             center: ['50%', '50%'],
             radius: ['65%', '65%'],
             label: {
                 normal: {
                     show: false
                 }
             },
             data: [{
                 value: 9,
                 name: '',
                 itemStyle: {
                     normal: {
                         borderWidth: 1,
                         borderColor: '#015a85'
                     }
                 }
             }]
         },
     ]
 };