Echarts for react, change label color emphasis using function

Question

I need to set color in emphasis label using color in data that i have, but it appears that i can use only static color.

 let dataItems = [
  { name: 'first', value: 10, id: 0, color: '#3dbe23', selected: true },
  { name: 'second', value: 10, id: 1, color: '#149397', selected: false },
  { name: 'third', value: 10, id: 2, color: '#5eca16', selected: false },
  { name: 'fourth', value: 10, id: 3, color: '#d1a11e', selected: false },
  { name: 'fifth', value: 10, id: 4, color: '#5f043c', selected: false },
  { name: 'sixth', value: 10, id: 5, color: '#6b94ee', selected: false },
]

i have this data, and i need different item to change label color on hover that refers to its color.

      itemStyle: {
        borderColor: '#000',
        borderWidth: 1,
        color: (data: any) => {
          return data.dataIndex === 0 ? data.data.color : '#fff'
        },
      },

it appears that i can do this in series item style, but can't in emphasis error example

  const handleMouseOver = (e: any) => {
    const chart = (myChart as any).getEchartsInstance()
    console.log({ e })
    chart.setOption({
      series: {
        emphasis: {
          label: {
            color: e.data.color,
          },
        },
      },
    })
  }

i tried this, it partially worked fine untill i move mouse before animation ended, and i don't think that it is a fine approach

Answer 1

it appears to me that the right way to solve it can be by providing the neccesary emphasis right in the data:

export const mocksPieChartDataItemsExtended = [
  {
    name: 'first',
    value: 10,
    id: '423',
    color: '#4CB9F1',
    selected: true,
    emphasis: { label: { color: '#fff' }, scale: false },
    select: {
      label: {
        color: '#fff',
      },
    },
  },
  {
    name: 'second',
    value: 10,
    id: '142fewg',
    color: '#149397',
    selected: false,
    label: { color: '#000000' },
    emphasis: { label: { color: '#149397' }, scale: false },
    select: {
      label: {
        color: '#fff',
      },
    },
  },
  {
    name: 'third',
    value: 10,
    id: '242fewg',
    color: '#5eca16',
    selected: false,
    label: { color: '#000000' },
    emphasis: { label: { color: '#5eca16' }, scale: false },
    select: {
      label: {
        color: '#fff',
      },
    },
  },
  {
    name: 'fourth',
    value: 10,
    id: '342fewg',
    color: '#d1a11e',
    selected: false,
    label: { color: '#000000' },
    emphasis: { label: { color: '#d1a11e' }, scale: false },
    select: {
      label: {
        color: '#fff',
      },
    },
  }]

Answer 2

The color that you pass in to the emphasis configuration need not necessarily be just a string. It accepts arrays too.

So, this should solve your problem.

...emphasis: {
    label: {
      show: true,
      color: dataItems.map(dataItem => dataItem.color)
    }
}