Chart transition effect not working (Echarts)

I have this code:

<!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>

But the transition effect from one graphic to another doesn't work, as it does on this page.

How can I adjust this code so that the graphs show this transient effect and don't suddenly change from one to the other (as is the case with the current code)?

Note that the transition effect should be smooth, as shown in the graphic on the page I sent you as an example. See that the sectors of the graph change to bars smoothly.

Solution

As I suspected, this is related to the usage of the right library. I checked their source code and found out that they are using the library from the below source:

https://fastly.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js

I used this library for the same snippet and saw the magic working.

Just change the script source from

https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js

https://fastly.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js

<!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://fastly.jsdelivr.net/npm/echarts@latest/dist/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>

Hope it helps!!