echarts柱状图横向数据太多（自动滚动加鼠标移入停止移出启动）

最新推荐文章于 2024-08-09 13:16:42 发布

liminla!

最新推荐文章于 2024-08-09 13:16:42 发布

阅读量124

点赞数

文章标签： echarts swift 前端

原文链接：https://www.cnblogs.com/zhuziyi007/p/17831777.html

版权

参考：原链接

创建一个carousel.ts文件

//传入四个配置项，option,optionXAxisLength:横向滚动条长度, myChart,t：定时轮播时间，endValue：控制展示数
export function carouselFn(option: any,optionXAxisLength:any, myChart: any, t: any, endValue: any) {
  option && myChart.setOption(option)
  let kk = setInterval(() => {
    // 每次向后滚动一个，最后一个从头开始。
    if (option.dataZoom[0].endValue == optionXAxisLength) {
      option.dataZoom[0].endValue = endValue
      option.dataZoom[0].startValue = 0
    } else {
      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
    }
    option && myChart.setOption(option)
  }, t)

  myChart.on('mouseover', () => {
    // 鼠标悬浮，停止自动轮播
    if (kk) clearInterval(kk)
  })

  myChart.on('mouseout', () => {
    // 鼠标移出，重新开始自动轮播
    if (kk) clearInterval(kk)
    kk = setInterval(() => {
      // 每次向后滚动一个，最后一个从头开始。
      if (option.dataZoom[0].endValue == optionXAxisLength) {
        option.dataZoom[0].endValue = endValue
        option.dataZoom[0].startValue = 0
      } else {
        option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1
        option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1
      }
      option && myChart.setOption(option)
    }, t)
  })
}

使用

import { carouselFn } from '@/utils/echarts/carousel'
  let endValue = 5
  const option = {
    title: { },
    tooltip: {},
    grid: {
      // 控制chart的上下左右间距
      left: 25,
      right: 25,
      bottom: 10,
      top: 35,
      containLabel: true
    },
    //滑轮滚动
    dataZoom: [
      {
        type: 'inside',
        show: false,
        xAxisIndex: [0], //组件Zoom控制第一个xAxis
        startValue: 0, //数据窗口范围的起始数据index
        endValue: endValue //结束index
      }
    ],
    xAxis: {
      type: 'category',
      data: xData,
      },
    yAxis: [
      {
        type: 'value',
        axisTick: {
          // 刻度
          show: false
        },
        splitLine: {
          // 网格
          show: true,
          lineStyle: {
            color: '#ffffff4D',
            type: 'dotted',
            width: 0.3
          }
        },
        axisLabel: {
          // y轴文字
          show: true,
          textStyle: {
            color: '#FFFFFFCC',
            fontFamily: 'Alibaba Sans-Medium',
            fontSize: 12
          },
          padding: [0, 0, 0, 0] // 设置 padding 值为 [10, 0, 0, 0]
        }
      },
      {
        type: 'value',
        axisTick: {
          // 刻度
          show: false
        },
        splitLine: {
          // 网格
          show: true,
          lineStyle: {
            color: '#ffffff4D',
            type: 'dotted',
            width: 0.3
          }
        },
        axisLabel: {
          // y轴文字
          show: true,
          textStyle: {
            color: '#FFFFFFCC',
            fontFamily: 'Alibaba Sans-Medium',
            fontSize: 12
          },
          padding: [0, 0, 0, 0] // 设置 padding 值为 [10, 0, 0, 0]
        }
      }
    ],
    series: [
      {
        data: lineData,
        type: 'line',
        smooth: true,
        yAxisIndex: 1
      },
      {
        type: 'bar',
        barWidth: 9,
        z: 2,
        label: {
          show: false
        },
        data: data
      },
      // 数据1顶部的样式
      {
        name: '',
        type: 'pictorialBar',
        symbolSize: [8, 5],
        symbolOffset: [0, -3],
        z: 6,
        symbolPosition: 'end',
        data: data
      },
      {
        name: '',
        type: 'pictorialBar',
        symbolSize: [8, 5],
        symbolOffset: [0, -3],
        z: 2,
        symbolPosition: 'end',
        data: fillArray //项目中实际需要0改成1才显示圆圈
      }
    ]
  }
  carouselFn(option,optionXAxisLength, barChart, 2000, endValue)