echarts模仿抖音你追我赶动态柱状图排序效果代码-html代码-BFW代码库

echarts模仿抖音你追我赶动态柱状图排序效果代码

代码语言：html

所属分类：图表

代码描述：echarts模仿抖音你追我赶动态柱状图排序效果代码，随着时间的运动，不同的柱状图你追我赶，适合数据进行时间维度的对比演示。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html style="height: 100%">

<head>
    <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.5.1.1.js"></script>

    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        
        var option;
        
        
        
        var data = [];
        for (let i = 0; i < 5; ++i) {
            data.push(Math.round(Math.random() * 200));
        }
        
        option = {
            xAxis: {
                max: 'dataMax',
            },
            yAxis: {
                type: 'category',
                data: ['A', 'B', 'C', 'D', 'E'],
                inverse: true,
                animationDuration: 300,
                animationDurationUpdate: 300,
                max: 2 // only the largest 3 bars will be displayed
            },
            series: [{
                realtimeSort: true,
.........完整代码请登录后点击上方下载按钮下载查看