使用数据集和编码 API 更改特定 echarts 条的颜色答案

【问题标题】：Change color of specific echarts bar using dataset and encode API使用数据集和编码 API 更改特定 echarts 条的颜色
【发布时间】：2020-07-13 16:40:55
【问题描述】：

我有一个使用 Angular (ngx-echarts) 中的 echarts 制作的条形图，使用数据集 + 编码 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},
  }],
};

我想通过设置为红色来突出显示特定条，而将其余部分设置为灰色。我意识到如果我要单独声明每个数据点，这可以很容易地完成：

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

但如果可能的话，我想避免这种情况并坚持使用数据集 + 编码 API。有没有办法解决单个条并修改它的颜色，或者默认突出显示它？

【问题讨论】：

标签： angular echarts

【解决方案1】：

参考这个链接： https://echarts.apache.org/v4/en/option.html#series-pie.itemStyle.color

您可以使用 itemStyle.color 作为回调函数来完成它，如下所示：

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
    }
  }
)

【讨论】：

【解决方案2】：

我认为您可以在数据集中执行如下操作：

dataset:{ source: [{category:'whatever', value: this.object, itemStyle: { color: '#e67345' } }, .....]

【讨论】：

我无法让它工作。我和OP有同样的问题。有没有人有补充的想法？