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

Question

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

查看 echarts legend api，我没有找到一个属性可以让我指定图例图标悬停时的颜色。

有关更清晰的示例，请参阅下面的图片。我已经突出显示了有问题的区域（图一是图表，图二是当我将图例悬停在 Total clients 上时。您可以看到图标颜色与条形强调颜色不匹配。条形图很暗，但图例图标几乎没有可见的）

下面我提供了我传递给 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: [...],
      ...
}

希望这可以帮助。