用echarts-for-react链接2个图例

Question

我正在尝试使用 echarts-for-react 进行一些操作，我有一个如下所示的界面：

这两个图内部具有相同的元素，尽管它们显示 2 个不同的值，但图例完全相同。 我想做的是链接两个图例，这样我就可以只有左边的一个图例来控制两个图，但我不知道如何做到这一点。

我尝试让他们共享一个数组，其中包含图例的值，但这不起作用，我尝试用饼图系列和条形图系列制作一个图表，但这变得太复杂了，所以我想知道是否有办法使用两个不同的图表来实现它，否则我会尝试再次沿着这条路线走下去

感谢您提供的任何见解

Answer 1

您可以将两个图表放入同一个 echarts 对象中，如果它们共享

name

属性，它们将在图例中链接。

这里是一个小例子：

option = {
  legend: {},
  xAxis: {type: 'category'},
  yAxis: {},
  grid: { top: '55%' },
  series: [
    {
      type: 'bar',
      name: 'a',
      data: [[0, 138]]
    },
    {
      type: 'bar',
      name: 'b',
      data: [[0, 102]]
    },
    {
      type: 'bar',
      name: 'c',
      data: [[0, 83]]
    },
    {
      type: 'pie',
      radius: '30%',
      center: ['50%', '25%'],
      data: [
        {name: 'a', value: 45},
        {name: 'b', value: 67},
        {name: 'c', value: 34}
        ]
    }
  ]
}

还有一个使用 dataset 的

官方示例

，您可能会感兴趣。