Echarts Vue3 自定义图例legend 的icon/字体 颜色

最近在用vue3 + echarts 开发

其中一个需求就是需要自定义图例icon的颜色和图例的字体样式的自定义

（为了和图表自定义的颜色一致）

在option本体里面 加入 color 这行代码

可以对图例legend中的 icon 颜色进行自定义

需要修改的icon的颜色 '#fff','#000','#888'分别对应 “第一个图例”、“第二个图例”、“第三个图例”

Option = {
    color:['#fff','#000','#888'],//关键代码
    //需要修改的icon的颜色 '#fff','#000','#888'分别对应 第一个图例、第二个图例、第三个图例
    legend: {
      data: [
        {
          name: '第一个图例',
          icon: 'roundRect',
        },
        {
          name: '第二个图例',
          icon: 'roundRect',
        },
        {
          name: '第三个图例',
          icon: 'roundRect',
        },
      ]
   }
}

如果需要修改字体的颜色或者大小

用 textStyle 就可以了

Option = {
    color:['#fff','#000','#888'],//关键代码
    //需要修改的icon的颜色 '#fff','#000','#888'分别对应 第一个图例、第二个图例、第三个图例
    legend: {
      data: [
        {
          name: '第一个图例',
          icon: 'roundRect',
          textStyle: {
            color: '#fff' ,//自定义文字字体颜色
            fontSize: 12
          },
        },
        {
          name: '第二个图例',
          icon: 'roundRect',
        },
        {
          name: '第三个图例',
          icon: 'roundRect',
        },
      ]
   }
}