我无法在Echarts中更改图例图标的颜色

Question

我在使用echarts（v4.0.4）时遇到的问题是，我无法更改图标上的图例悬停颜色以匹配我使用series[].empahsis.itemStyle.color提供的条形图悬停颜色。

看着echarts legend api，我没有找到一个属性，该属性可以让我指定希望将图例图标悬停在上面时的颜色。

更清晰的示例，请参见下面的图片。我突出显示了有问题的区域（图一是图形，图2是当我将图例悬停在Total客户端上时。您可以看到图标颜色与栏强调颜色不匹配。该栏是深色的，但图例图标几乎没有可见）

下面我提供了我传递给echarts的选项json。

const options = {
  legend: {
    show: true,
    data: [
      {
        name: LANG.clientRetention
      },
      {
        name: LANG.totalClients
      }
    ]
  },
  series: [
    {
      name: LANG.clientRetention,
      type: "line",
      symbolSize: 7,
      lineStyle: {
        width: 3,
        color: style.lineColor
      },
      itemStyle: {
        color: style.lineColor,
        borderWidth: 3,
        opacity: 1
      },
      data: this.getRettention() //this returns a string array
    },
    {
      name: LANG.totalClients,
      type: "bar",
      data: this.getTotalClients(), // this returns a string array
      itemStyle: {
        barBorderRadius: [3, 3, 0, 0],
        color: style.graphColor
      },
      emphasis: {
        itemStyle: {
          color: "#D6E2E3"
        }
      }
    }
  ]
};

Answer 1

您无法直接在Echarts中定义图标的颜色字段。幸运的是，有一种解决方法。只需在选项字段中定义颜色数组（如下所示），图标就会按顺序使用颜色。

option = {
      ...,
      color:['#ae1029','#0065c2','#26c238', '#9876aa', '#fb8649', 
             '#57904b','#d35b5c'],
      series: [...],
      ...
}

希望这会有所帮助。