eCharts钻取后返回顶层仍显示返回按钮问题咨询

使用ECharts实现了两个柱状图，其中id为main2的图表带钻取功能。点击图表数据钻取后会显示返回按钮，点击返回按钮能回到初始图表，但返回后按钮仍停留在图表顶层，只有刷新页面才能移除。

ECharts的setOption方法默认是合并配置项，而非完全覆盖。点击返回时调用myChart.setOption(option)，但原始option中没有定义graphic配置，所以之前添加的返回按钮图形元素不会被自动移除，依然保留在图表上。

在返回时的配置中显式清空graphic元素，或者初始化时给option添加空的graphic数组，确保返回时合并配置后清空按钮。以下是两种实现方式：

方式一：返回时显式清空 #

修改返回按钮的点击事件，在setOption中添加graphic: []：

onclick: function () {
  myChart.setOption({
    ...option,
    graphic: [] // 显式清空所有图形元素
  });
}

方式二：初始化时添加空graphic #

给原始option添加空的graphic数组，这样返回时直接调用myChart.setOption(option)即可自动合并清空：

var option = {
  xAxis: {
    data: ['Animals', 'Fruits', 'Cars']
  },
  yAxis: {},
  dataGroupId: '',
  animationDurationUpdate: 500,
  graphic: [], // 初始化空的graphic配置
  series: {
    // 原有series配置不变
  }
};

<td class='drilldown center' id='main2' style='width: 30vw; height:45vh' >
  <script type='text/javascript'>
    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom);
    var option = {
      xAxis: {
        data: ['Animals', 'Fruits', 'Cars']
      },
      yAxis: {},
      dataGroupId: '',
      animationDurationUpdate: 500,
      graphic: [],
      series: {
        type: 'bar',
        id: 'sales',
        data: [
          {
            value: 5,
            groupId: 'animals'
          },
          {
            value: 2,
            groupId: 'fruits'
          },
          {
            value: 4,
            groupId: 'cars'
          }
        ],
        universalTransition: {
          enabled: true,
          divideShape: 'clone'
        }
      }
    };
    const drilldownData = [
      {
        dataGroupId: 'animals',
        data: [
          ['Cats', 4],
          ['Dogs', 2],
          ['Cows', 1],
          ['Sheep', 2],
          ['Pigs', 1]
        ]
      },
      {
        dataGroupId: 'fruits',
        data: [
          ['Apples', 4],
          ['Oranges', 2]
        ]
      },
      {
        dataGroupId: 'cars',
        data: [
          ['Toyota', 4],
          ['Opel', 2],
          ['Volkswagen', 2]
        ]
      }
    ];
    myChart.on('click', function (event) {
      if (event.data) {
        var subData = drilldownData.find(function (data) {
          return data.dataGroupId === event.data.groupId;
        });
        if (!subData) {
          return;
        }
        myChart.setOption({
          xAxis: {
            data: subData.data.map(function (item) {
              return item[0];
            })
          },
          series: {
            type: 'bar',
            id: 'sales',
            dataGroupId: subData.dataGroupId,
            data: subData.data.map(function (item) {
              return item[1];
            }),
            universalTransition: {
              enabled: true,
              divideShape: 'clone'
            }
          },
          graphic: [
            {
              type: 'text',
              left: 50,
              top: 20,
              style: {
                text: 'Back',
                fontSize: 18
              },
              onclick: function () {
                myChart.setOption(option);
              }
            }
          ]
        });
      }
    });
    
    option && myChart.setOption(option);
  </script>
</td>

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