ECharts 解决 Sankey 桑基图没有动画问题

版本

5.6.0

现象

在React中使用了echarts-for-react库。

在直接使用JavaScript初始化的ECharts中。

都出现了Sankey没有动画效果。

原因

数据变化时没有调用clear()方法。

解决

React

const SankeyChart = ({loading, data, links}: Props) => {
    const echartsRef = useRef<InstanceType<typeof ReactECharts>>(null);

    useEffect(() => {
        if (echartsRef.current) {
            const echartsInstance = echartsRef.current.getEchartsInstance();
            
            // 注意：setOption 前先清理图表
            echartsInstance.clear();
            const options = {
                tooltip: {
                    trigger: 'item',
                    triggerOn: 'mousemove',
                    confine: true,
                },
                series: [
                    {
                        type: 'sankey',
                        emphasis: {
                            focus: 'adjacency'
                        },
                        data,
                        links,
                        lineStyle: {
                            color: 'source',
                            curveness: 0.6
                        }
                    }
                ]
            };
            echartsInstance.setOption(options);
        }
    }, [data, links]);

    return <>
        <ReactECharts
                    ref={echartsRef}
                    showLoading={loading}
                    option={{}}
                    notMerge={true}
                    lazyUpdate={true}
                />
    </>
}

export default SankeyChart;

JavaScript

<script>
    // 初始化图表
    const chartDom = document.getElementById('chart');
    const myChart = echarts.init(chartDom);
    // 模拟异步请求
    setTimeout(() => {
        // 模拟从接口获取的数据
        const data = {
            nodes: [
                { name: 'A' }, { name: 'B' }, { name: 'C' },
                { name: 'D' }, { name: 'E' }, { name: 'F' }
            ],
            links: [
                { source: 'A', target: 'B', value: 5 },
                { source: 'A', target: 'C', value: 3 },
                { source: 'B', target: 'D', value: 4 },
                { source: 'C', target: 'D', value: 3 },
                { source: 'C', target: 'E', value: 1 },
                { source: 'D', target: 'F', value: 6 },
                { source: 'E', target: 'F', value: 2 }
            ]
        };

        // 配置项
        const option = {
            title: { text: 'Sankey 异步数据动画示例' },
            tooltip: { trigger: 'item', triggerOn: 'mousemove' },
            // animation: true,
            // animationDuration: 2000,
            // animationEasingUpdate: 'cubicInOut',
            series: [
                {
                    type: 'sankey',
                    layout: 'none',
                    emphasis: {
                        focus: 'adjacency'
                    },
                    data: data.nodes,
                    links: data.links,
                    lineStyle: {
                        color: 'gradient',
                        curveness: 0.5
                    }
                }
            ]
        };
        
        // 注意：setOption 前先清理图表
        myChart.clear();
        // 设置配置项，强制触发动画
        myChart.setOption(option);
    }, 1000); // 模拟1秒的网络延迟
</script>