动态排序柱状图echarts 柱状配置项内容和展示

          var year =[2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006, 2005, 2004, 2003, 2002, 2001, 2000, 1999, 1998, 1997, 1996, 1995, 1994, 1993, 1992, 1991, 1990, 1989, 1988, 1987, 1986, 1985, 1984, 1983, 1982]
    var data = [
    [431, 550, 878, 989, 351, 391, 508, 1189],
    [428, 521, 868, 950, 335, 377, 506, 1167],
    [422, 512, 867, 936, 316, 367, 502, 1163],
    [423, 502, 867, 936, 299, 354, 478, 1159],
    [411, 486, 850, 915, 300, 355, 461, 1112],
    [409, 478, 837, 889, 285, 370, 458, 1096],
    [405, 462, 828, 879, 271, 380, 443, 1053],
    [407, 452, 801, 872, 261, 376, 430, 1029],
    [400, 462, 790, 868, 253, 356, 430, 983],
    [384, 454, 790, 839, 254, 346, 420, 970],
    [372, 452, 770, 823, 259, 347, 394, 932],
    [359, 448, 770, 802, 240, 349, 394, 923],
    [357, 460, 751, 761, 230, 364, 365, 901],
    [343, 444, 735, 733, 226, 353, 363, 871],
    [331, 453, 722, 718, 225, 364, 339, 856],
    [312, 424, 717, 702, 226, 339, 325, 837],
    [307, 407, 713, 674, 220, 336, 314, 809],
    [300, 409, 686, 661, 211, 308, 312, 774],
    [298, 380, 664, 633, 192, 298, 309, 760],
    [282, 377, 657, 621, 181, 280, 289, 721],
    [279, 367, 646, 578, 178, 264, 285, 682],
    [280, 361, 645, 572, 172, 278, 278, 682],
    [276, 359, 641, 545, 171, 274, 278, 633],
    [261, 348, 629, 527, 168, 256, 263, 590],
    [258, 332, 601, 512, 156, 244, 243, 567],
    [238, 313, 601, 467, 151, 225, 237, 521],
    [227, 286, 594, 424, 137, 201, 237, 488],
    [226, 287, 571, 411, 127, 200, 210, 486],
    [230, 274, 548, 381, 120, 178, 201, 466],
    [218, 262, 541, 334, 103, 188, 187, 421],
    [205, 260, 525, 330, 93, 162, 187, 375],
    [190, 264, 502, 295, 86, 161, 186, 330],
    [173, 236, 473, 292, 76, 140, 159, 282],
    [162, 215, 453, 251, 68, 113, 140, 253],
    [159, 192, 444, 210, 71, 89, 134, 243],
    [140, 198, 434, 206, 64, 99, 123, 196],
    [120, 213, 420, 206, 52, 83, 108, 186],
    [119, 192, 413, 193, 47, 90, 82, 142],
    [120, 206, 392, 150, 45, 60, 80, 120]
]
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例',
        },
        tooltip: {},
        legend: {
            data: ['各城市人口']
        },
        yAxis: {
            data: ['A市人口', 'B市人口', 'C市人口', 'D市人口',
            'E市人口', 'F市人口', 'G市人口', 'H市人口'
            ],
            inverse: true,
        },
        xAxis: {},
        series: [{
            realtimeSort: true,
            name: '各城市人口',
            showBackground: true,
            label: {
                show: true,
                position: 'right',
                valueAnimation: true
            },
            stack: {},
            type: 'bar',
            data: [120, 206, 392, 150]
        }],
        animationDuration: 0,
        animationDurationUpdate: 500,
        animationEasing: 'linear',
        animationEasingUpdate: 'linear'
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    for (let i = 0; i < data.length; i++) {
        setTimeout(function() {
            var option1 = {
                title: {
                    text: year[data.length - i - 1].toString()+'年人口'
                },
                series: [{
                    data: data[data.length - i - 1]
                }]
            }
            console.log(option1)
            myChart.setOption(option1)
        }, 500 * i)
    }