奇怪的需求之 echarts legend设置为scroll后,需要鼠标也能触发上下滚动

发布时间 2023-10-17 15:22:33作者: whitebang
直接上解决代码:

        const myChart = this.$echarts.init(this.$refs[ref])
        myChart.setOption(option)
        // 该监听器正在监听一个`zrender 事件`。
        const legend = option.series[0].data
        let index = 0 // 初始位置为0,legend翻页数为2
        myChart.getZr().on('mousewheel', function ({ wheelDelta }) {
          index = index - wheelDelta
          index = Math.max(0, Math.min(Math.floor(legend.length / 2) - 1, index))
          // 阻止默认滚动事件
          event.preventDefault()
          myChart.dispatchAction({
            type: 'legendScroll',
            scrollDataIndex: index * 2
          })
        })