echarts - 使用数据集时如何覆盖各个 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 中实现。我通过使用回调函数找到了解决方案。
通过定义一个对象，在其各自的键上保存每个数据点的颜色，我可以返回定义的颜色:

<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
此外，我向数据集添加了一个可选的标题行。这是不必要的，因为 ECharts 通过“名称”引用数据集中的第一列。为了更加清晰起见，我向该函数添加了一条日志记录语句，以便您可以深入了解渲染图表时如何处理数据集。

---

如果需要更简单的解决方案，可以通过创建颜色数组并将系列对象中的 colorBy 选项设置为“data”来实现 - 请参阅 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