Change color of specific echarts bar using dataset and encode API

Question

I have an bar chart made with echarts in Angular (ngx-echarts), using the dataset + encode API:

const options: EChartOption = {
  tooltip: {},
  dataset: {source: dataSource},
  xAxis: {
    name: xAxisLabel,
    nameLocation: 'middle',
    nameGap: 22,
  },
  yAxis: {
    name: yAxisLabel,
    nameLocation: 'middle',
    nameGap: 25,
  },
  series: [{
    name: field.label,
    type: 'bar',
    encode: {x: xDataField, y: yDataField},
  }],
};

I want to highlight a specific bar by making is red, while setting the rest grey. I realize this can be done easily if I were to declare each data point individually:

series: [{
    data: [
        {
            value: 120,
            itemStyle: {color: 'grey'},
        },
        {
            value: 200,
            itemStyle: {color: 'red'},
        },
        {
            value: 150,
            itemStyle: {color: 'grey'},
        }
    ],
    type: 'bar'
}],

But if possible I would like to avoid that and stick with the dataset + encode API. Is there anyway to address an individual bar and modify its color, or highlight it by default?

Answer 1

refer to this link: https://echarts.apache.org/v4/en/option.html#series-pie.itemStyle.color

you can get it done using itemStyle.color as a callback function like this:

const colors = {
  positive: '#008000',
  neutral: '#ffa500',
  negative: '#ff0000',
}
// ... 
chart.setOption({
    id: 'pie',
    type: 'pie',
    itemStyle: { 
      // HERE IS THE IMPORTANT PART
      color: seriesIndex => colors[seriesIndex.name] 
    },
    encode: {
      itemName: 'sentiment',
      value: initialDim ,
      tooltip: initialDim
    }
  }
)