柱状图数据翻滚排序效果echarts 柱状配置项内容和展示

翻滚

      var title = ''
var count = 0
var datelist = ["201507","201508","201509","201510","201511","201512","201601","201602","201603","201604","201605","201606","201607","201608","201609","201610","201611","201612","201701","201702","201703","201704","201705","201706","201707","201708","201709","201710","201711","201712","201801","201802","201803","201804","201805","201806","201807","201808","201809","201810","201811","201812","201901","201902","201903","201904","201905","201906","201907","201908","201909","201910","201911","201912","202001","202002","202003","202004","202005","202006"]
var dataSourc = [
    {"name":"四倍杠杆债同比","data":[110,146,160,196,242,257,277,319,360,405,409,430,469,512,542,571,573,614,641,687,734,766,782,831,855,895,911,936,940,942,964,981,1007,1054,1083,1085,1115,1142,1160,1189,1191,1208,1209,1235,1268,1303,1346,1356,1367,1370,1372,1394,1408,1427,1439,1470,1508,1519,1533,1581]},
    {"name":"家用电器","data":[103,151,188,199,233,265,306,311,331,368,375,419,422,458,494,534,579,595,603,636,652,685,699,709,714,760,765,800,837,882,922,946,948,949,966,1008,1057,1067,1080,1106,1150,1194,1239,1283,1329,1369,1411,1439,1478,1522,1524,1542,1590,1620,1666,1679,1693,1706,1728,1758]},
    {"name":"房地产","data":[130,151,196,230,249,281,302,317,343,374,416,436,466,479,497,541,578,610,629,654,689,715,749,785,830,867,900,916,939,987,1020,1038,1055,1061,1089,1138,1156,1167,1171,1219,1261,1274,1286,1294,1319,1365,1372,1393,1432,1472,1500,1534,1580,1605,1616,1653,1700,1729,1731,1769]},
    {"name":"建筑装饰","data":[104,109,117,156,166,212,233,254,270,310,331,377,416,465,514,524,555,582,611,639,667,681,728,745,791,800,841,845,875,909,955,957,994,1030,1062,1084,1089,1136,1178,1198,1211,1225,1247,1251,1282,1310,1336,1375,1390,1402,1422,1459,1468,1470,1474,1520,1550,1560,1576,1616]},
    {"name":"建筑材料","data":[122,148,154,199,218,246,256,300,323,361,362,376,381,384,401,404,405,421,460,478,521,568,602,633,650,677,707,744,746,761,780,815,824,854,857,860,909,935,946,980,1012,1056,1060,1061,1101,1103,1117,1119,1138,1157,1175,1213,1251,1279,1299,1306,1313,1347,1352,1363]},
    {"name":"机械设备","data":[145,192,236,267,293,309,328,363,410,426,463,505,528,534,557,605,652,672,720,747,787,811,854,864,875,885,898,921,944,971,983,985,1003,1017,1058,1059,1082,1098,1138,1164,1165,1203,1219,1237,1247,1258,1263,1267,1281,1320,1359,1376,1400,1444,1456,1496,1544,1553,1571,1596]},
    {"name":"汽车","data":[120,134,183,193,201,210,249,276,293,327,366,398,417,427,476,498,543,592,631,655,700,720,735,741,754,786,834,878,886,902,920,946,961,1006,1016,1028,1035,1049,1097,1131,1141,1150,1160,1172,1174,1179,1205,1229,1238,1251,1284,1309,1343,1353,1380,1387,1412,1447,1478,1524]},
    {"name":"采掘","data":[125,134,156,177,217,236,285,334,342,387,419,440,442,491,500,525,544,550,569,593,630,669,684,693,725,771,784,823,852,891,934,963,1008,1029,1047,1076,1115,1137,1181,1214,1252,1256,1271,1278,1284,1285,1307,1335,1377,1418,1455,1476,1514,1534,1565,1607,1654,1695,1720,1745]},
    {"name":"钢铁","data":[124,148,196,230,261,267,287,320,355,386,418,420,435,482,493,508,540,564,570,576,599,614,619,621,637,661,678,689,707,752,800,849,863,900,939,967,1006,1049,1054,1062,1071,1090,1139,1168,1217,1254,1282,1328,1377,1416,1452,1490,1512,1540,1560,1580,1627,1655,1656,1657]}
]
var colorlist = ['#FF6600', '#FF8247', '#FF3030', '#FF1493', '#D02090', '#1E90FF', '#FFE1FF', '#EE1289', '#A020F0']
function getydatalist () {
    title = datelist[count]
    var list = dataSourc.map((item, index) => {
        return {
            name: item.name,
            value: item.data[count],
            data: {
                value: item.data[count],
                itemStyle: { color: colorlist[index] }
            }
        }
    })
    count++
    return bubbleSort(list)
}
function bubbleSort (arr) {
    var len = arr.length
    for (var i = 0; i < len; i++) {
        for (var j = 0; j < len - 1 - i; j++) {
            if (arr[j].value > arr[j + 1].value) {
                var temp = arr[j + 1]
                arr[j + 1] = arr[j]
                arr[j] = temp
            }
        }
    }
    return arr
}
renderecharts()
myChart.setOption(option)
var dsq = setInterval(() => {
    renderecharts()
    myChart.setOption(option)
    if (count === datelist.length) {
        clearInterval(dsq)
    }
}, 1000)
function renderecharts () {
    var list1 = []
    var list2 = []
    var echartData = getydatalist()
    echartData.map(item => {
        list1.push(item.name)
        list2.push(item.data)
    })
    option = {
        title: {
            text: title,
            subtext: '纯属虚构',
            left: 96
        },
        xAxis: {
            type: 'value',
        },
        yAxis: {
            type: 'category',
            data: list1
        },
        series: [{
            data: list2,
            type: 'bar',
            barWidth: 30,
            label: {
                show: true,
                color: '#000',
                position: 'right'
            }
        }]
    }
    
}