前端 - ECharts中Dataset数据重复时如何正确显示多个相同项？

Question

echarts的dataset中有相同值时，无法正常显示

import * as echarts from 'echarts';

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

option = {
  title: {
    text: 'World Population'
  },
  dataset: {
    source: [
      ['score', 'amount', 'product'],
      [89.3, 58212, 'Matcha Latte'],
      [57.1, 78254, 'Matcha Latte'],
      [74.4, 41032, 'Cheese Cocoa'],
      [50.1, 12755, 'Cheese Brownie']
    ]
  },

  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category'
  },
  series: [
    {
      type: 'bar',
      encode: {
        // 将 "amount" 列映射到 X 轴。
        x: 'amount',
        // 将 "product" 列映射到 Y 轴。
        y: 'product'
      }
    }
  ]
};

option && myChart.setOption(option);

希望能显示两个Matcha Latte

Answer 1

在 ECharts 中，当 yAxis 的 type 设置为 'category' 时，它默认会将类别（在这里是 'product'）视为唯一的，即使数据集中存在重复的值。这导致在图表上只能看到一个唯一的 'Matcha Latte' 条目，即使实际上有两个不同的数据点与之关联。

为了正确显示多个相同项（如两个 'Matcha Latte'），你可以考虑以下几种解决方案：

1. 修改数据结构

最直接的方法是修改你的数据结构，以便能够区分相同的 'product' 项。例如，你可以添加一个额外的维度（如 'group' 或类似的）来区分它们：

source: [
  ['score', 'amount', 'product', 'group'],
  [89.3, 58212, 'Matcha Latte', 'Group A'],
  [57.1, 78254, 'Matcha Latte', 'Group B'],
  [74.4, 41032, 'Cheese Cocoa', 'Group A'],
  [50.1, 12755, 'Cheese Brownie', 'Group A']
]

然后在 yAxis 或 series 中使用 'group' 或 'product + group' 作为类别。但请注意，yAxis 通常为类别轴，这里你可能需要将其用作分组或标签的展示，并通过其他方式（如工具提示或图例）来区分不同的 'Matcha Latte'。

2. 使用堆叠（Stack）或分组（Group）

如果你只是想在视觉上区分这两个 'Matcha Latte'，但不想改变数据结构，你可以考虑使用堆叠（如果适用）或调整图表布局来间接区分它们。然而，在标准的条形图中，这通常不是直接支持的功能。

3. 自定义 yAxis 标签

你可以通过 yAxis.axisLabel.formatter 自定义标签的显示，但这种方法仍然需要某种方式来区分或标记重复的 'product'。

4. 使用其他图表类型

考虑使用其他图表类型，如散点图（Scatter）或气泡图（Bubble），其中每个数据点可以通过其位置、大小或颜色来区分。

5. 自定义渲染逻辑

对于更复杂的场景，你可能需要编写自定义的渲染逻辑，比如使用 graphic 组件来直接在画布上绘制额外的标记或文本。

结论

在大多数情况下，修改数据结构以包含足够的唯一性信息是最简单和最直接的方法。如果你不能或不想修改数据结构，那么你可能需要采用更复杂的解决方案，如自定义标签、使用其他图表类型或编写自定义渲染逻辑。