横向柱状图实现自动轮播，鼠标悬停和滚动控制切换

vue3+js项目中使用echarts实现横向柱状统计图自动无缝轮播，和鼠标悬停和滚动控制切换记录

1、定义echarts渲染位置

 <div class="se-homemiddle__liqchart" ref="qyBar">
 </div>

2、 监听数据变化，调用echarts更新渲染数据（数据是后端定时推送的）

const qyBar = ref()

let isFirst=true
watch(() => propsData.areaMonitor, (newVal, oldVal) => {
    if (newVal !== oldVal) {
        drawBarChartH(isFirst,qyBar.value,newVal)
        isFirst=false
    }
})

 3、drawBarChartH方法，我是单独使用一个js专门定义echarts的配置

//横向柱状图（首页）
let timer = null,
    BarChartH = null,
    BarChartHOption = null
const drawBarChartH = (isFirst, dom, yData) => {
    let s = yData.map((item) => {
        let arr = item.value.split('km/h')
        return {
            value: arr[0],
            label: {
                color: item.color[1],
                formatter: `${arr[0]}km/h`,
            },
            itemStyle: {
                type: 'linear',
                color: {
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 1,
                            color: item.color[1],
                        },
                        {
                            offset: 0,
                            color: item.color[0],
                        },
                    ],
                },
            },
        }
    })
    let y = yData.map((item) => {
        return {
            value: item.name,
            textStyle: {
                color: item.color[0],
                fontWeight: 600,
            },
        }
    })

    //控制数据长度无缝滚动切换时长比后端间隔推送数据间隔长
    let _sData = [...s, ...s, ...s, ...s, ...s, ...s]
    let _yData = [...y, ...y, ...y, ...y, ...y, ...y]
    let _endValue = 7

    if (isFirst) {
        BarChartH = echarts.init(dom)
        BarChartHOption = {
            tooltip: {
                trigger: 'axis',
                show: false,
            },
            grid: {
                left: '2%',
                right: '25%',
                top: '3%',
                bottom: '3%',
                containLabel: true,
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    show: false,
                    color: '#00c0fa',
                    fontSize: 12,
                },
                axisTick: { show: false },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(77,128,254,0.2)',
                        type: 'line',
                    },
                },
            },
            yAxis: [
                {
                    type: 'category',
                    inverse: true,
                    data: _yData,
                    axisLabel: {
                        show: true,
                        fontWeight: 600,
                    },
                    axisLine: { show: false },
                    axisTick: { show: false },
                    splitLine: { show: false },
                },
            ],
            dataZoom: [
                {
                    yAxisIndex: 0,
                    show: false,
                    type: 'slider',
                    startValue: 0,
                    endValue: _endValue,
                },
            ],
            series: [
                {
                    type: 'bar',
                    name: '速度',
                    barWidth: 10,
                    zlevel: 1,
                    label: {
                        show: true,
                        position: 'right',
                        fontSize: 12,
                        distance: 10,
                    },
                    barWidth: 10,
                    data: _sData,
                },
            ],
        }
        isFirst = false
        BarChartH.setOption(BarChartHOption)

        timer && clearInterval(timer)
        timer = setInterval(function () {
            if (BarChartHOption.dataZoom[0].endValue === _sData.length) {
                BarChartHOption.dataZoom[0].endValue = _endValue
                BarChartHOption.dataZoom[0].startValue = 0
            } else {
                BarChartHOption.dataZoom[0].endValue = BarChartHOption.dataZoom[0].endValue + 1
                BarChartHOption.dataZoom[0].startValue = BarChartHOption.dataZoom[0].startValue + 1
            }
            BarChartH.setOption(BarChartHOption)
        }, 2000)

        let scrollTimeout = null
        dom.addEventListener('mouseover', function (e) {
            e.preventDefault()
            timer && clearInterval(timer)
            dom.addEventListener('mousewheel', handleMouseWheel, { passive: false })
            function handleMouseWheel(e) {
                clearTimeout(scrollTimeout)
                scrollTimeout = setTimeout(function () {
                    if (e.wheelDelta < 0) {
                        //鼠标下滑
                        if (BarChartHOption.dataZoom[0].endValue === _sData.length) {
                            BarChartHOption.dataZoom[0].endValue = _endValue
                            BarChartHOption.dataZoom[0].startValue = 0
                        } else {
                            BarChartHOption.dataZoom[0].endValue = BarChartHOption.dataZoom[0].endValue + 1
                            BarChartHOption.dataZoom[0].startValue = BarChartHOption.dataZoom[0].startValue + 1
                        }
                    } else {
                        //鼠标上滑
                        if (BarChartHOption.dataZoom[0].startValue === 0) {
                            BarChartHOption.dataZoom[0].endValue = _sData.length - 1
                            BarChartHOption.dataZoom[0].startValue = _sData.length - _endValue
                        } else {
                            BarChartHOption.dataZoom[0].endValue = BarChartHOption.dataZoom[0].endValue - 1
                            BarChartHOption.dataZoom[0].startValue = BarChartHOption.dataZoom[0].startValue - 1
                        }
                    }
                    BarChartH.setOption(BarChartHOption)
                }, 300)
            }
        })

        dom.addEventListener('mouseout', function (e) {
            e.preventDefault()
            timer && clearInterval(timer)
            scrollTimeout && clearTimeout(scrollTimeout)
            timer = setInterval(function () {
                if (BarChartHOption.dataZoom[0].endValue === _sData.length) {
                    BarChartHOption.dataZoom[0].endValue = _endValue
                    BarChartHOption.dataZoom[0].startValue = 0
                } else {
                    BarChartHOption.dataZoom[0].endValue = BarChartHOption.dataZoom[0].endValue + 1
                    BarChartHOption.dataZoom[0].startValue = BarChartHOption.dataZoom[0].startValue + 1
                }
                BarChartH.setOption(BarChartHOption)
            }, 2000)
        })
    } else {
        BarChartHOption = {
            dataZoom: [
                {
                    yAxisIndex: 0,
                    show: false,
                    type: 'slider',
                    startValue: 0,
                    endValue: _endValue,
                },
            ],
            yAxis: [
                {
                    data: _yData,
                },
            ],
            series: [
                {
                    name: '速度',
                    data: _sData,
                },
            ],
        }
        BarChartH.setOption(BarChartHOption)
    }

    window.addEventListener('resize', function () {
        BarChartH.resize()
    })
}