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

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

查看echarts，我还没有找到一个属性，允许我指定我希望在悬停时图例图标的颜色

有关更清晰的示例，请参见下面的图片。我突出显示了问题区域（图1为图表，图2为我将图例悬停在Total Client上时的情况。您可以看到图标颜色与条形图的强调颜色不匹配。条形图为黑色，但图例图标几乎不可见）

下面我提供了我传递给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"
        }
      }
    }
  ]
};

---

您不能在Echarts中直接定义图标的颜色字段。幸运的是，这样做有一个解决办法。只需在下面的选项字段中定义颜色数组，图标就会按顺序使用颜色

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

---

希望这有帮助。

这是我遇到的同一个问题

您应该拥有与选项顶层数据匹配的颜色数组

如果数据有2项，则颜色数组应该有2项

const lineChartConfig = (x, data1, data2) => {
  const option = {
     color: [
              new graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0.5,
                  color: '#24e499',
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255,0)',
                },
              ]), 
              new graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0.5,
                  color: '#0b75e2',
                },
                {
                  offset: 1,
                  color: 'rgba(255,255,255,0)',
                },
              ])
    ],
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: x,
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    tooltip: {
      trigger: 'axis',
      position: 'top',
      textStyle: {
        color: '#fff',
      },
      borderColor: '#24e499',
      backgroundColor: '#24e499',
    },
    series: [
      {
        type: 'line',
        symbol: 'none',
        lineStyle: {
          width: 2,
          color: '#24e499',
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0.5,
              color: '#24e499',
            },
            {
              offset: 1,
              color: 'rgba(255,255,255,0)',
            },
          ]),
        },
        data: data1,
      },
      {
        type: 'line',
        symbol: 'none',
        lineStyle: {
          width: 2,
          color: '#0b75e2',
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0.5,
              color: '#0b75e2',
            },
            {
              offset: 1,
              color: 'rgba(255,255,255,0)',
            },
          ]),
        },
        data: data2,
      },
    ],
  };
  return option;
};