echarts柱状图轮播（datazoom方法）

最新推荐文章于 2024-09-21 14:09:22 发布

zyj12138

最新推荐文章于 2024-09-21 14:09:22 发布

阅读量9.1k

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/zyj12138/article/details/107099771

版权

本文介绍了如何使用React Hooks和Echarts创建柱状图的轮播效果，特别强调了datazoom的配置和使用，以及在处理数据变化时如何避免定时器重复创建的问题。

摘要由CSDN通过智能技术生成

在网上看到的挺多方法都踩坑，于是自己写的分享出来，技术为react hooks
我们先定义一下起点和终点数值（不理解的同学可以先去看一下datazoom的demo实例）
let zoomstart
let zoomend
let space;

  function options(space,y,serdata){
   
    let time = setInterval(() => {
   
      setbarOption({
   
        xAxis: {
   
          type: 'value',
          name: '单位：头',
          position: 'right',
          axisLine:{
   
            lineStyle: {
   
              type: 'solid',
              color: 'rgba(247,255,62,1)',//左边线的颜色
              width:'1'//坐标线的宽度
            }
          },
          splitLine: {
        //网格线
            "show": false
          },
      },
      tooltip