echarts datazoom 缩放进度条定时移动实现

echarts datazoom 缩放进度条定时移动实现

<!-- html -->
	<div id='barMain'></div>
<!-- html -->

<javascript>
var barData = {
    name: [],
    value: []
};

for (let index = 1; index < 21; index++) {
    barData.name.push(`仓库名称${index}`)
    barData.value.push(index * 4)
}
var steepSum = barData.name.length;
var steep = (parseInt(100 / (steepSum / 4)))

var barChart = echarts.init(document.getElementById('barMain'));
var option = {
    backgroundColor: 'rgba(12, 23, 49, 0.7)',
    title: {
        text: '库存周转率',
        textStyle: {
            color: '#04a9c3',
            fontSize: 12
        },
    },
    grid: {
        top: '15%',
        left: '10%',
        right: '10%',
        bottom: '20%',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: {
                    type: 'shadow',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgba(0, 255, 233,0)'
                    }, {
                        offset: 0.5,
                        color: 'rgba(255, 255, 255,1)',
                    }, {
                        offset: 1,
                        color: 'rgba(0, 255, 233,0)'
                    }],
                    global: false
                }
            },
        },
    },

    // "calculable": true,
    "xAxis": [{
        show: true,


        axisLine: {
            lineStyle: {
                color: 'white'
            }
        },
        axisLabel: {

            textStyle: {
                fontFamily: 'Microsoft YaHei'
            }
        },
        "data": barData.name,
    }],
    "yAxis": [{
        type: 'value',
        splitNumber: 3,
        axisLine: {
            show: false,
            lineStyle: {
                color: 'white'
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.3)'
            }
        },
        axisLabel: {}

    }],
    "dataZoom": [{
        "show": true,
        "height": 10,
        "xAxisIndex": [
            0
        ],
        bottom: 10,
        "start": 0,
        "end": steep,
        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
        handleSize: '110%',
        handleStyle: {
            color: "#d3dee5",

        },
        textStyle: {
            color: "#fff"
        },
        borderColor: "#90979c"


    }],
    "series": [

        {
            "name": "",
            "type": "bar",
            "stack": "总量",
            barWidth: '50%',
            barMaxWidth: '20',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#fccb05'
                    }, {
                        offset: 1,
                        color: '#f5804d'
                    }]),
                    barBorderRadius: 12,
                },
            },
            "data": barData.value
        }
    ]
};
barChart.setOption(option);
// 动态展示数据逻辑
if (barChartBarInterval) {
    window.clearInterval(barChartBarInterval)
};
var barChartBarInterval = setInterval(() => {
    //获得图表数据数组下标
    calculationPosition(option, steep, 'no');
}, 10000);
calculationPosition(option, steep, 'yes');
var calculationPosition = function(option, steep, type) {
    var app = {
        currentIndex: -1, // 起始位置
    };
    if (type == 'no') { // 不是第一次  第一次不用计算和初始化位置，当底部进度条移动后，需要初始化位置
        var startValue = option.dataZoom[0].start + steep;
        var endValue = option.dataZoom[0].end + steep;
        if (endValue < 100 && endValue + steep > 100) {
            startValue = 100 - steep;
            endValue = 100
        }
        if (endValue > 100 || startValue > 100) {
            startValue = 0;
            endValue = steep;
        }
        option.dataZoom[0].start = startValue;
        option.dataZoom[0].end = endValue;
        barChart.setOption(option, true);
        app = {
            currentIndex: barChart.getModel().option.dataZoom[0].startValue - 1,
        };
    }
    if (barChartInterval) {
        window.clearInterval(barChartInterval)
    }
    var barChartInterval = setInterval(function() {
        let dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        that.barChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
        app.currentIndex = (app.currentIndex + 1) % dataLen;
        // 高亮当前图形
        that.barChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: app.currentIndex,
        });
        // 显示 tooltip
        that.barChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: app.currentIndex
        });
    }, 1500);
}
</javascript>