我有这个代码：
<!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>但是从一个图形到另一个图形的过渡效果不起作用，就像在这个页面上一样。
如何调整此代码，以便图形显示这种瞬态效果，并且不会突然从一个变为另一个（如当前代码的情况）？
注意过渡效果要平滑，如我发送给您的示例页面上的图形所示。看到图形的扇区平滑地变为条形。
正如我怀疑的，这与正确库的使用有关。我检查了他们的源代码，发现他们正在使用以下来源的库： 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>希望有帮助！！