Echarts legend文字配置多个颜色及图标

image.png

代码如下:

 legend: {
    data: [
      {
        name: '3-11岁任务数',
        icon: 'circle',//图形样式 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
        textStyle: {
          color: '#5470C6'
        },
      },
      {
        name: '3-11岁全程接种量',
        icon: 'rect',
        textStyle: {
          color: '#91CC75'
        },
      },
      {
        name: '60岁任务数',
        icon: 'roundRect',
        textStyle: {
          color: '#FAC858'
        },
      },
      {
        name: '60岁全程接种量',
        icon: 'circle',
        textStyle: {
          color: '#EE6666'
        },
      },
      {
        name: '80岁任务数',
        icon: 'circle',
        textStyle: {
          color: '#73C0DE'
        },
      },
      {
        name: '80岁全程接种量',
        icon: 'circle',
        textStyle: {
          color: '#3BA272'
        },
      },
      {
        name: '完成率',
        // icon: 'line',
        textStyle: {
          color: '#FC8452'
        },
      },

    ]
  },

或者简洁点的,想让字体和icon颜色保持一致可以如下

  legend: {
    data: [
      '3-11岁任务数',
      '3-11岁全程接种量',
      '60岁任务数',
      '60岁全程接种量',
      '80岁任务数',
      '80岁全程接种量',
      '完成率'
    ],
    textStyle: {
      
      color: '33FFFF',
    },
  },

你可能感兴趣的:(Echarts legend文字配置多个颜色及图标)