轮播柱状图

原作者https://gallery.echartsjs.com/editor.html?c=xufhUULjIG

var uploadedDataURL = "/asset/get/s/data-1591344758953-j1Y7QqUmH.json"; myChart.showLoading(); var data={ "carCountRank": [ { "视频13": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "3", "uiCount": 1, "uiGrouping": 0, "total": 67027, "small": 58699, "middle": 6738, "big": 1113, "large": 47, "motor": 430 } }, { "视频11": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "26", "uiCount": 1, "uiGrouping": 0, "total": 64297, "small": 57545, "middle": 5808, "big": 208, "large": 1, "motor": 735 } }, { "视频12": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "25", "uiCount": 1, "uiGrouping": 0, "total": 63400, "small": 55799, "middle": 6330, "big": 328, "large": 6, "motor": 937 } }, { "视频14": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "2", "uiCount": 1, "uiGrouping": 0, "total": 58965, "small": 50338, "middle": 7579, "big": 931, "large": 22, "motor": 95 } }, { "视频20": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "19", "uiCount": 1, "uiGrouping": 0, "total": 58361, "small": 56192, "middle": 1770, "big": 359, "large": 14, "motor": 26 } }, { "视频22": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "16", "uiCount": 1, "uiGrouping": 0, "total": 54448, "small": 51717, "middle": 2548, "big": 157, "large": 0, "motor": 26 } }, { "视频15": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "1", "uiCount": 1, "uiGrouping": 0, "total": 54299, "small": 48030, "middle": 5668, "big": 523, "large": 7, "motor": 71 } }, { "视频23": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "17", "uiCount": 1, "uiGrouping": 0, "total": 50150, "small": 43960, "middle": 5137, "big": 1048, "large": 3, "motor": 2 } }, { "视频30": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "23", "uiCount": 1, "uiGrouping": 0, "total": 49914, "small": 45858, "middle": 2789, "big": 1204, "large": 51, "motor": 12 } }, { "视频32": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "20", "uiCount": 1, "uiGrouping": 0, "total": 48673, "small": 47085, "middle": 1419, "big": 70, "large": 0, "motor": 99 } }, { "视频26": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "13", "uiCount": 1, "uiGrouping": 0, "total": 44509, "small": 40803, "middle": 3019, "big": 673, "large": 7, "motor": 7 } }, { "视频21": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "15", "uiCount": 1, "uiGrouping": 0, "total": 44283, "small": 42373, "middle": 1613, "big": 279, "large": 12, "motor": 6 } }, { "视频29": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "14", "uiCount": 1, "uiGrouping": 0, "total": 42660, "small": 39444, "middle": 2999, "big": 95, "large": 0, "motor": 122 } }, { "视频24": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "18", "uiCount": 1, "uiGrouping": 0, "total": 42593, "small": 39025, "middle": 3311, "big": 245, "large": 3, "motor": 9 } }, { "视频27": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "4", "uiCount": 1, "uiGrouping": 0, "total": 42059, "small": 39096, "middle": 2689, "big": 225, "large": 0, "motor": 49 } }, { "视频25": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "12", "uiCount": 1, "uiGrouping": 0, "total": 42035, "small": 37332, "middle": 3080, "big": 1552, "large": 65, "motor": 6 } }, { "视频08": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "33", "uiCount": 1, "uiGrouping": 0, "total": 39889, "small": 39095, "middle": 730, "big": 1, "large": 0, "motor": 63 } }, { "视频06": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "30", "uiCount": 1, "uiGrouping": 0, "total": 39835, "small": 39064, "middle": 717, "big": 2, "large": 0, "motor": 52 } }, { "视频28": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "5", "uiCount": 1, "uiGrouping": 0, "total": 39830, "small": 36338, "middle": 2701, "big": 769, "large": 4, "motor": 18 } }, { "视频05": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "29", "uiCount": 1, "uiGrouping": 0, "total": 39800, "small": 39013, "middle": 717, "big": 1, "large": 0, "motor": 69 } }, { "视频16": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "11", "uiCount": 1, "uiGrouping": 0, "total": 39459, "small": 33934, "middle": 4032, "big": 1346, "large": 13, "motor": 134 } }, { "视频07": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "27", "uiCount": 1, "uiGrouping": 0, "total": 37536, "small": 36772, "middle": 705, "big": 5, "large": 0, "motor": 54 } }, { "视频19": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "21", "uiCount": 1, "uiGrouping": 0, "total": 33698, "small": 32665, "middle": 1010, "big": 8, "large": 0, "motor": 15 } }, { "视频02": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "6", "uiCount": 1, "uiGrouping": 0, "total": 32890, "small": 28434, "middle": 3450, "big": 955, "large": 45, "motor": 6 } }, { "视频31": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "10", "uiCount": 1, "uiGrouping": 0, "total": 32602, "small": 27802, "middle": 4069, "big": 714, "large": 4, "motor": 13 } }, { "视频18": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "22", "uiCount": 1, "uiGrouping": 0, "total": 31888, "small": 30868, "middle": 922, "big": 11, "large": 1, "motor": 86 } }, { "视频09": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "31", "uiCount": 1, "uiGrouping": 0, "total": 30778, "small": 30726, "middle": 46, "big": 0, "large": 0, "motor": 6 } }, { "视频10": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "32", "uiCount": 1, "uiGrouping": 0, "total": 30740, "small": 30679, "middle": 56, "big": 0, "large": 0, "motor": 5 } }, { "视频17": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "9", "uiCount": 1, "uiGrouping": 0, "total": 30463, "small": 25560, "middle": 4012, "big": 845, "large": 17, "motor": 29 } }, { "视频01": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "7", "uiCount": 1, "uiGrouping": 0, "total": 29304, "small": 24740, "middle": 3297, "big": 1131, "large": 126, "motor": 10 } }, { "视频03": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "8", "uiCount": 1, "uiGrouping": 0, "total": 16416, "small": 14822, "middle": 964, "big": 580, "large": 41, "motor": 9 } }, { "视频04": { "uiSpeed": 0, "uiFeatureType": 0, "ubiSourceId": "24", "uiCount": 1, "uiGrouping": 0, "total": 15893, "small": 13760, "middle": 2105, "big": 12, "large": 0, "motor": 16 } } ], } if(data.carCountRank){ var statData = data.carCountRank; var page = 0; var size = 4; var count = statData.length; var pages = Math.ceil(count / size); let option = { grid: [{ //左侧的柱状图grid left:'4%', top: '20%', right: '4%', bottom: '1%' }], tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, xAxis: [{ //左侧柱状图的X轴 gridIndex: 0, //x 轴所在的 grid 的索引 show: false }], legend: { data:['小型车','中型车','大型车','特大型车','摩托车'], top:30 }, yAxis: [{ //左侧柱状图的Y轴 gridIndex: 0, //y轴所在的 grid 的索引 splitLine: 'none', axisTick: 'none', axisLine: 'none', axisLabel: { verticalAlign: 'bottom', align: 'left', padding: [0, 0, 15, 15], textStyle: { color: '#fff', fontSize: '14', } }, data: [], inverse: true, }, { //左侧柱状图的Y轴 gridIndex: 0, //y轴所在的 grid 的索引 splitLine: 'none', axisTick: 'none', axisLine: 'none', data: [], inverse: true, axisLabel: { show: true, verticalAlign: 'bottom', align: 'right', padding: [0, 20, 15, 0], textStyle: { color: '#fff', fontSize: '16', }, formatter: function(value) { return '{x|' + value + '} {y|' + "辆}" }, rich: { y: { color: '#befbff', fontSize: 16 }, x: { color: '#f6cf42', fontSize: 16 } } } }, { //左侧柱状图的Y轴 gridIndex: 0, //y轴所在的 grid 的索引 splitLine: 'none', axisTick: 'none', axisLine: 'none', data: [] } ], series: [ { name: '小型车', stack: '总量', type: 'bar', xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。 yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。 barWidth: 15, z:2, label: { show: true, position: 'insideRight' }, data: [] }, { name: '中型车', stack: '总量', type: 'bar', xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。 yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。 barWidth: 15, z: 2, label: { show: true, position: 'insideRight' }, data: [] }, { name: '大型车', stack: '总量', type: 'bar', xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。 yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。 barWidth: 15, z:2, label: { show: true, position: 'insideRight' }, data: [] }, { name: '特大型车', stack: '总量', type: 'bar', xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。 yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。 barWidth: 15, z:2, label: { show: true, position: 'insideRight' }, data: [] }, { name: '摩托车', stack: '总量', type: 'bar', xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。 yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。 barWidth: 15, z:2, label: { show: true, position: 'insideRight' }, data: [] }, { name: '外框', type: 'bar', xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。 yAxisIndex: 2, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。 barGap: '-100%', data: [], barWidth: 15, itemStyle: { normal: { color: '#2d5271', barBorderRadius: 0, } }, z: 0 }] }; setInterval(function(){ let yAxisData = []; let seriesData = []; let small = []; let middle = []; let big = []; let large = []; let motor = []; let currentData = statData.slice(page * size, (page + 1) * size); $.each(currentData,function(idx,val){ for(let key in val){ yAxisData.push(key); seriesData.push(val[key].total); small.push(val[key].small); middle.push(val[key].middle); big.push(val[key].big); large.push(val[key].large); motor.push(val[key].motor); } }) page = ++page % pages; let maxLevel = Math.max(...seriesData); let maxLevels = [maxLevel,maxLevel,maxLevel,maxLevel]; option.yAxis[0].data = yAxisData; option.yAxis[1].data = seriesData; option.series[0].data = small; option.series[1].data = middle; option.series[2].data = big; option.series[3].data = large; option.series[4].data = motor; option.series[5].data = maxLevels; myChart.setOption(option); myChart.hideLoading(); },5000) var index = 0; //播放所在下标 var mTime = setInterval(function() { myChart.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: index }); index++; if(index > size) { index = 0; } }, 1000); }