//检查督导 var myChart8 = echarts.init(document.getElementById('left3_d'), 'vintage'); var colorList1 = ['#f0422a', '#ffa531', '#00a041', '#41cafe']; var datas = [{ value: 96, name: '一队', }, { value: 94, name: '二队', }, { value: 89, name: '三队', }, { value: 85, name: '监察部', }, { value: 75, name: '三连', }, { value: 69, name: '四队', }, { value: 65, name: '一连', }, { value: 65, name: '后勤', }, { value: 61, name: '一大队', }, { value: 60, name: '保障部', }, ]; var end = 3; var start = -1; function autoChangea() { if (end == datas.length-1 ) { start=0; end=3; } else { start+=1; end+=1; } let maxArr = new Array(datas.length).fill(100); var option = { dataZoom: [ { type: 'slider', width:5, show: true, yAxisIndex: [0], left: '93%', handleColor:'#68789c', startValue: start, //数据窗口范围的起始百分比 endValue:end, }, { type: 'inside', yAxisIndex: [0], startValue: start, //数据窗口范围的起始百分比 endValue:end, } ], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow', }, }, legend: { show: false, }, grid: { top: 20, bottom: 0, left: 0, right: 40, containLabel: true, }, xAxis: { show: false, type: 'value', }, yAxis: [{ type: 'category', inverse: true, axisLine: { show: false, }, axisTick: { show: false, }, axisPointer: { label: { show: true, margin: 30, }, }, data: datas.map((item) => item.name), axisLabel: { margin: 40, fontSize: 12, align: 'left', color: '#fff', rich: { a1: { color: '#fff', backgroundColor: colorList1[0], width: 20, height: 20, align: 'center', borderRadius: 2, }, a2: { color: '#fff', backgroundColor: colorList1[1], width: 20, height: 20, align: 'center', borderRadius: 2, }, a3: { color: '#fff', backgroundColor: colorList1[2], width: 20, height: 20, align: 'center', borderRadius: 2, }, b: { color: '#fff', backgroundColor: colorList1[3], width: 20, height: 20, align: 'center', borderRadius: 2, }, }, formatter: function (params) { var index = datas.map((item) => item.name).indexOf(params); index = index + 1; if (index - 1 < 3) { return ['{a' + index + '|' + index + '}' + ' '].join('\n'); } else { return ['{b|' + index + '}' + ' '].join('\n'); } }, }, }, ], series: [{ z: 2, name: '加分', type: 'bar', barWidth: 15, zlevel: 1, data: datas.map((item, i) => { itemStyle = { color: i > 3 ? colorList1[3] : colorList1[i], barBorderRadius: 30, }; return { value: item.value, itemStyle: itemStyle, }; }), label: { show: true, position: 'insideTopRight', padding: [-24, 24, -24, 0], color: '#fff', formatter: '{c}分', fontSize: 14, offset: [10, 0], }, }, { z: 2, name: '扣分', type: 'bar', barWidth: 15, zlevel: 1, data: datas.map((item, i) => { itemStyle = { color: i > 3 ? colorList1[3] : colorList1[i], barBorderRadius: 30, }; return { value: 100 - item.value, itemStyle: itemStyle, }; }), label: { show: true, position: 'insideTopLeft', padding: [-24, 24, -24, 0], color: '#fff', formatter: '{b}', fontSize: 14, offset: [10, 0], }, }, { name: '满分', type: 'bar', barWidth: 15, barGap: '-100%', itemStyle: { normal: { color: '#0c1231', barBorderRadius: 30, }, }, data: maxArr, }, ], }; myChart8.setOption(option); } autoChangea(); //初始化实例后,首次设置数据 setInterval(function () { // 每次向后滚动一个,最后一个从头开始。 autoChangea(); }, 5000);