ducha-qianduan/public/taishi/left3_d.js

		//检查督导
	    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);