动态排序柱状图-【官方】百战程序员_IT在线教育培训机构

柱状图系列的 realtimeSort 设为 true，表示开启该系列的动态排序效果
yAxis.inverse 设为 true，表示 Y 轴从下往上是从小到大的排列
yAxis.animationDuration 建议设为 300，表示第一次柱条排序动画的时长
yAxis.animationDurationUpdate 建议设为 300，表示第一次后柱条排序动画的时长
如果想只显示前 n 名，将 yAxis.max 设为 n - 1，否则显示所有柱条
xAxis.max 建议设为 'dataMax' 表示用数据的最大值作为 X 轴最大值，视觉效果更好
如果想要实时改变标签，需要将 series.label.valueAnimation 设为 true
animationDuration 设为 0，表示第一份数据不需要从 0 开始动画（如果希望从 0 开始则设为和 animationDurationUpdate 相同的值）
animationDurationUpdate 建议设为 3000 表示每次更新动画时长，这一数值应与调用 setOption 改变数据的频率相同
以 animationDurationUpdate 的频率调用 setInterval，更新数据值，显示下一个时间点对应的柱条排序


xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./echarts.js"></script>
    <style>
        div {
            margin: 200px;
        }
    </style>
</head>
<body>
    <div id="root" style="width:600px;height:400px"></div>
    <script>
        var myChart = echarts.init(document.getElementById("root"))
        var data = [];
        for (let i = 0; i < 5; ++i) {
            data.push(Math.round(Math.random() * 200));
        }
        var option = {
            xAxis: {
                max: 'dataMax'
            },
            yAxis: {
                type: 'category',
                data: ['A', 'B', 'C', 'D', 'E'],
                inverse: true,
                animationDuration: 300,
                animationDurationUpdate: 300,
                max: 4
            },
            series: [
                {
                    realtimeSort: true,
                    name: 'X',
                    type: 'bar',
                    data: data,
                    label: {
                        show: true,
                        position: 'right',
                        valueAnimation: true
                    }
                }
            ],
            animationDuration: 3000,
            animationDurationUpdate: 3000,
            animationEasing: 'linear',
            animationEasingUpdate: 'linear'
        }
        function update() {
            var data = option.series[0].data;
            for (var i = 0; i < data.length; i++) {
                data[i] += Math.round(Math.random() * 2000);
            }
            myChart.setOption(option);
        }
        setInterval(function () {
            update();
        }, 3000);
        myChart.setOption(option)
    </script>
</body>
</html>

Grid_网格布局基础

北京市昌平区回龙观镇南店村综合商业楼2楼226室