ECharts图表切换过渡效果失效问题排查与解决

我编写了如下ECharts代码，用于实现柱状图与饼图的定时切换：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Norph Chart Example</title>
  <!-- Adicione o link para a biblioteca ECharts -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
</head>
<body>
  <div id="chart-container" style="width: 600px; height: 400px;"></div>

  <script>
    // Inicializar o gráfico ECharts
    const myChart = echarts.init(document.getElementById('chart-container'));

  const dataset = {
  dimensions: ['name', 'score'],
  source: [
    ['Hannah Krause', 314],
    ['Zhao Qian', 351],
    ['Jasmin Krause ', 287],
    ['Li Lei', 219],
    ['Karle Neumann', 253],
    ['Mia Neumann', 165],
    ['Böhm Fuchs', 318],
    ['Han Meimei', 366]
  ]
};
const pieOption = {
  dataset: [dataset],
  series: [
    {
      type: 'pie',
      // associate the series to be animated by id
      id: 'Score',
      radius: [0, '50%'],
      universalTransition: true,
      animationDurationUpdate: 1000
    }
  ]
};
const barOption = {
  dataset: [dataset],
  xAxis: {
    type: 'category'
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      // associate the series to be animated by id
      id: 'Score',
      // Each data will have a different color
      colorBy: 'data',
      encode: { x: 'name', y: 'score' },
      universalTransition: true,
      animationDurationUpdate: 1000
    }
  ]
};

option = barOption;

setInterval(() => {
  option = option === pieOption ? barOption : pieOption;
  // Use the notMerge form to remove the axes
  myChart.setOption(option, true);
}, 2000);
  </script>
</body>
</html>

但当前图表切换时无平滑过渡效果，而是突兀切换，无法达到官网示例中饼图扇区平滑转为柱状图的效果。请问如何调整代码实现该平滑过渡效果？

核心原因 #

你使用的ECharts版本是5.1.2，而通用过渡（Universal Transition）功能是在ECharts 5.2.0版本才正式发布的，低版本不支持该特性，因此无法实现平滑过渡。此外，setOption传入的true参数（强制不合并配置）会破坏过渡所需的上下文状态，进一步导致切换突兀。

修改步骤 #

1. 升级ECharts版本：将CDN链接替换为5.2.0及以上版本，比如使用稳定版CDN：

   <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
   

2. 调整setOption参数：移除第二个参数true，让ECharts默认合并配置，保留过渡所需的状态信息。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Norph Chart Example</title>
  <!-- 升级到支持通用过渡的ECharts版本 -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
  <div id="chart-container" style="width: 600px; height: 400px;"></div>

  <script>
    const myChart = echarts.init(document.getElementById('chart-container'));

    const dataset = {
      dimensions: ['name', 'score'],
      source: [
        ['Hannah Krause', 314],
        ['Zhao Qian', 351],
        ['Jasmin Krause ', 287],
        ['Li Lei', 219],
        ['Karle Neumann', 253],
        ['Mia Neumann', 165],
        ['Böhm Fuchs', 318],
        ['Han Meimei', 366]
      ]
    };
    
    const pieOption = {
      dataset: [dataset],
      series: [
        {
          type: 'pie',
          id: 'Score',
          radius: [0, '50%'],
          universalTransition: true,
          animationDurationUpdate: 1000
        }
      ]
    };
    
    const barOption = {
      dataset: [dataset],
      xAxis: {
        type: 'category'
      },
      yAxis: {},
      series: [
        {
          type: 'bar',
          id: 'Score',
          colorBy: 'data',
          encode: { x: 'name', y: 'score' },
          universalTransition: true,
          animationDurationUpdate: 1000
        }
      ]
    };

    let option = barOption;
    myChart.setOption(option);

    setInterval(() => {
      option = option === pieOption ? barOption : pieOption;
      // 移除notMerge参数，使用默认合并配置
      myChart.setOption(option);
    }, 2000);
  </script>
</body>
</html>

说明 #

• 升级版本后，通用过渡功能会自动生效，饼图扇区与柱状图柱子会基于相同的series.id关联，实现平滑的形态过渡。
• 保留universalTransition: true配置，确保启用通用过渡特性；animationDurationUpdate控制过渡动画的时长，可根据需求调整。

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