使用数据集时如何覆盖单个 ECharts 数据点的外观？

Question

我有一个包含许多数据点的 echarts 图，我使用数据集提供这些数据。如何仅为部分数据点设置格式设置选项？

例如如果我没有使用数据集，那么我可能会突出显示单个数据点 like this:

series: [
{
  type: 'bar',
  data: [
    97.7,
    {
      value: 43,
      itemStyle: {
        color: '#ff0000'
      }
    },
    92.5
]

但是using a dataset我没有地方存放这些额外的信息：

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
  dataset: {
    source: [    
      ['A', 97.7],
      ['B', 43],
      ['C', 92.5]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [{ type: 'bar' }]
});

如果我尝试在 series[type='bar'].data 中设置选项，那么它 removes the data supplied by the dataset。

Answer 1

面对同样的问题，不相信这个功能没有实现到 ECharts 中。我通过使用回调函数找到了解决方案。
通过定义一个 object 将每个数据点的颜色保存在其各自的键上，我能够 return 定义的颜色：

<div id="main" style="width: 600px;height:400px;"></div>

var myChart = echarts.init(document.getElementById('main'));

let colors = {
  'A': '#FF0000',
  'B': '#00FF00',
  'C': '#0000FF'
};

myChart.setOption({
  dataset: [{
    source: [
      ['name', 'value'],
      ['A', 97.7],
      ['B', 43],
      ['C', 92.5]
    ]
  }],
  xAxis: {
    type: 'category',
  },
  yAxis: {},
  series: {
    type: 'bar',
    itemStyle: {
      color: function(seriesIndex) {
        console.log(seriesIndex);
        return (colors[seriesIndex.name]);
      }
    }
  }
});

fiddle
此外，我向数据集添加了一个可选的 header 行。这不是必需的，因为 ECharts 通过“名称”引用数据集中的第一列。为了更加清晰，我向该函数添加了一个日志语句，以便您可以深入了解在呈现图表时数据集是如何处理的。

如果需要更简单的解决方案，可以通过创建一个颜色数组并将 colorBy 选项设置为系列中的“数据”来实现 object - 请参阅 ECharts documentation.
这只是遍历颜色列表并将它们分配给集合中的每个条目：

<div id="main" style="width: 600px;height:400px;"></div>

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
  dataset: [{
    source: [
      ['name', 'value'],
      ['A', 97.7],
      ['B', 43],
      ['C', 92.5]
    ]
  }],
  xAxis: {
    type: 'category',
  },
  color: [
    '#FF0000',
    '#00FF00',
    '#0000FF'
  ],
  yAxis: {},
  series: {
    type: 'bar',
    colorBy: 'data',
  }
});

fiddle

使用数据集时如何覆盖单个 ECharts 数据点的外观？

How override appearance of individual ECharts data points when using a dataset?

echarts