dataZoom跟随鼠标位置左右滑动

摆脱传统dataZoom组件只能拖动的问题

var yData1 = [
   2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 10.2, 54.2, 90.4, 43.2, 100.3, 65.2, 99.1
]
var yData2 = [
   2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3, 22.4, 11.2, 67.4, 88.9, 130.2, 79.3, 67.3
]
// 初始数据范围
var initialDataZoom = {
    start: 0,
    end: 100 // 这里的值根据你的数据范围来设置
};

option = {
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'shadow',
         crossStyle: {
            color: '#999'
         }
      },
      backgroundColor: '#ffffff'
   },
   legend: {
      data: ['套餐用户', '低感套餐用户'],
      right: '8%',
      top: '4%',
      itemWidth: 10,
      itemHeight: 10
   },
   xAxis: [
      {
         type: 'category',
         data: ['999元', '799元', '599元', '499元', '399元', '299元', '239元', '199元', '169元', '159元', '149元', '129元', '99元', '79元', '59元', '39元', '29元', '19元', '未知'],
         axisPointer: {
            type: 'shadow'
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            lineStyle: {
               color: '#999999'
            }
         },
         axisLabel: {
            color: '#999999'
         }
      }
   ],
   yAxis: [
      {
         type: 'value',
         min: 0,
         max: 250,
         interval: 50,
         splitLine: {
            show: true,
            lineStyle: {
               type: 'dashed'
            }
         },
         axisLabel: {
            color: '#999999'
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: false
         }
      }
   ],
   series: [
      {
         name: '套餐用户',
         type: 'bar',
         tooltip: {
            valueFormatter: function (value) {
               return value + ' 万';
            }
         },
         itemStyle: {
            color: '#5257F9',
            borderRadius: 3
         },
         barMaxWidth: 15,
         data: yData1
      },
      {
         name: '低感套餐用户',
         type: 'bar',
         tooltip: {
            valueFormatter: function (value) {
               return value + ' 万';
            }
         },
         itemStyle: {
            color: '#FC7A3D',
            borderRadius: 3
         },
         barMaxWidth: 15,
         data: yData2
      }
   ],
   dataZoom: [
      {
         id: 'dataZoomY',
         xAxisIndex: [0],
         show: true, //是否显示滑动条，不影响使用
         type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
         startValue: 0, // 从头开始。
         endValue: 10, // 一次性展示5个
         height: 3,
          start: initialDataZoom.start,
            end: initialDataZoom.end,
         borderColor: 'transparent',
         fillerColor: 'rgba(87, 102, 236,1)',
         zoomLock: true,
         showDataShadow: false, //是否显示数据阴影 默认auto
         backgroundColor: '#fff',
         showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
         realtime: true, //是否实时更新
         filterMode: 'filter',
         handleIcon: 'circle',
         handleStyle: {
            color: 'rgba(87, 102, 236,1)',
            borderColor: 'rgba(87, 102, 236,1)',
         },
         // handleSize: '80%',
         moveHandleSize: 0,
         // maxValueSpan: "2014-02-24",
         // minValueSpan: 4,
         brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
      },
      {
         //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
         type: "inside",
         xAxisIndex: [0],//控制哪个轴，如果是 number 表示控制一个轴，如果是 Array 表示控制多个轴。此处控制第二根轴
         zoomOnMouseWheel: false, //滚轮是否触发缩放
         moveOnMouseMove: true, //鼠标移动能否触发平移
         moveOnMouseWheel: true,//鼠标滚轮能否触发平移
      },
   ]
};
// 更新图表配置
myChart.setOption(option);

// 监听鼠标移动事件
myChart.getZr().on('mousemove', function (params) {
    // 获取鼠标在画布上的相对位置
    var mouseX = params.event.offsetX;
    
    // 计算新的dataZoom范围
    var dataZoomWidth = initialDataZoom.end - initialDataZoom.start;
    var newStart = Math.max(0, mouseX - dataZoomWidth / 2);
    var newEnd = Math.min(100, mouseX + dataZoomWidth / 2); // 这里的值根据你的数据范围来设置
    
    // 更新dataZoom配置
    myChart.setOption({
        dataZoom: [
            {
                type: 'slider',
                start: newStart,
                end: newEnd
            }
        ]
    });
});