Loading animation: When the data is loaded for the first time or data sets are switched, you can set the animation property to display the loading animation. Specifically, you can set it to 'auto' or true, which will enable the default loading animation effect, or set it to an object to customize the specific effect of the loading animation. For example:
option = {
animation: true,
...
};
Update animation: When the data changes, you can display the update animation by setting the animationDurationUpdate and animationEasingUpdate properties, which will automatically execute the animation after the data changes, making the data changes more intuitive and smooth. For example:
option = {
series: [{
type: 'sankey',
animationDurationUpdate: 1000, // 更新动画时长为 1s
animationEasingUpdate: 'quinticInOut', // 更新动画缓动效果为 'quinticInOut'
...
}]
...
};
In the above code, we set the type of the series attribute to 'sankey', which means creating a Sankey diagram, and set the duration and easing effect of the update animation through the animationDurationUpdate and animationEasingUpdate attributes respectively. This way, the Sankey diagram will automatically perform an update animation when the data changes.
It should be noted that in order to use animation effects, the ECharts version needs to be upgraded to version 4.0 and above.
The complete code is as follows:
HTML part:
<div id="sankeyChart" style="height: 500px;"></div>
js:
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('sankeyChart'));
// 配置项
var option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: {
type: 'sankey',
emphasis: {
focus: 'adjacency'
},
nodeWidth: 20,
data: [{
name: 'A'
}, {
name: 'B'
}, {
name: 'C'
}, {
name: 'D'
}, {
name: 'E'
}],
links: [{
source: 'A',
target: 'B',
value: 10
}, {
source: 'A',
target: 'C',
value: 15
}, {
source: 'B',
target: 'D',
value: 12
}, {
source: 'C',
target: 'D',
value: 8
}, {
source: 'C',
target: 'E',
value: 10
}]
}
};
// 显示加载动画
myChart.showLoading();
// 异步加载数据
setTimeout(function () {
myChart.hideLoading();
myChart.setOption(option);
}, 2000);
// 更新数据
setTimeout(function () {
option.series.data.push({
name: 'F'
});
option.series.links.push({
source: 'D',
target: 'F',
value: 5
});
myChart.setOption(option);
}, 4000);
In the above code, the showLoading() method is used to display the loading animation. After the asynchronous data loading is completed, the hideLoading() method is used to hide the loading animation and the setOption() method is called to set the chart data. Then, after a delay of 4 seconds, use the setOption() method to update the data. The end result is a Sankey diagram with loading and updating animations.