如何使用Apache ECharts内置功能在同一画布切换不同数据集图表

Apache ECharts 提供了两种内置方案可以实现不同数据集的切换，完全不需要外置下拉菜单，样式和图表原生风格天然统一：

方案1：单选模式 Legend 图例（配置最简，推荐） #

如果5个数据集都是同类型图表（比如均为折线/柱状图），直接将图例的选中模式设为单选即可，点击对应图例项就会自动切换显示对应数据集，不需要额外写交互逻辑：

const option = {
  legend: {
    data: ['价格', '买入量', '卖出量', '7日买入', '7日卖出'],
    selectedMode: 'single', // 开启单选模式，每次仅显示一个选中的数据集
    top: 10, // 可自定义位置、样式，和图表完全融合
  },
  xAxis: {
    type: 'category',
    data: /* 你的共用时间轴数据 */
  },
  yAxis: {
    type: 'value'
  },
  series: [
    prices,
    buy_volume,
    sell_volume,
    seven_day_buy,
    seven_day_sell
  ]
}

初始化时可以通过legend.selected配置默认显示的数据集，所有切换逻辑ECharts会自动处理。

方案2：Toolbox 自定义下拉菜单（适配全场景） #

如果不同数据集对应的图表配置差异较大（比如图表类型不同、坐标轴配置不同），可以用ECharts内置工具箱的自定义菜单实现，你现有的切换逻辑几乎可以直接复用：

const option = {
  toolbox: {
    feature: {
      datasetSwitch: {
        show: true,
        title: '切换数据集',
        icon: 'path://M432.45,595.836c0-14.43,11.699-26.129,26.129-26.129h129.954c14.43,0,26.129,11.699,26.129,26.129v20.153c0,14.43-11.699,26.129-26.129,26.129H458.58c-14.43,0-26.129-11.699-26.129-26.129V595.836z M617.841,490.55c0-14.43,11.699-26.129,26.129-26.129h129.954c14.43,0,26.129,11.699,26.129,26.129v20.153c0,14.43-11.699,26.129-26.129,26.129H643.97c-14.43,0-26.129-11.699-26.129-26.129V490.55z M253.24,377.795c0-14.43,11.699-26.129,26.129-26.129h420.603c14.43,0,26.129,11.699,26.129,26.129v20.153c0,14.43-11.699,26.129-26.129,26.129H279.37c-14.43,0-26.129-11.699-26.129-26.129V377.795z M70.071,269.847c0-14.43,11.699-26.129,26.129-26.129h603.772c14.43,0,26.129,11.699,26.129,26.129v20.153c0,14.43-11.699,26.129-26.129,26.129H96.2C81.77,316.129,70.071,304.43,70.071,290V269.847z', // 此处为菜单图标svg路径，也可替换为你需要的图标
        menuItems: [
          {name: '价格', value: '0'},
          {name: '买入量', value: '1'},
          {name: '卖出量', value: '2'},
          {name: '7日买入', value: '3'},
          {name: '7日卖出', value: '4'}
        ],
        onclick: function (params) {
          const value = params.value
          if (value == '0') {
            day_chart.setOption(prices, true);
          } else if (value == '1') {
            day_chart.setOption(buy_volume, true);
          } else if (value == '2') {
            day_chart.setOption(sell_volume, true);
          } else if (value == '3') {
            day_chart.setOption(seven_day_buy, true);
          } else if (value == '4') {
            day_chart.setOption(seven_day_sell, true);
          }
        }
      }
    },
    right: 10
  },
  // 剩余其他图表配置
}

两种方案的样式都可以通过ECharts的主题、样式配置项和整体UI统一，完全不需要外置DOM控件。

内容的提问来源于stack exchange，提问作者csjh