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中直接定义图标的颜色字段。幸运的是，有一种解决方法。只需在选项字段中定义颜色数组，如下所示，图标将按顺序使用颜色。

struct MainView: View {
    @EnvironmentObject var user: UserObservable
    var body: some View {
        VStack {
            NavigationView {
                List(user.items, id: \.self) { item in
                    NavigationLink(destination: ItemView(item: item)) {
                        Text(item.name)
                    }
                }
                .navigationBarTitle("\(user.displayName)'s items")
                .navigationBarItems(leading: AddItemViewButton().environmentObject(user),
                                    trailing: MainViewActionSheet().environmentObject(user))
            }
        }
    }
}

希望这会有所帮助。

Answer 2

我遇到了同样的问题

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

如果数据有 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;
};

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

2 个答案: