vue echarts实现折线图X轴的拖拽效果

最新推荐文章于 2023-10-11 10:05:20 发布

原创最新推荐文章于 2023-10-11 10:05:20 发布 · 3.8k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #echarts

Vue 同时被 2 个专栏收录

198 篇文章

订阅专栏

echarts

9 篇文章

订阅专栏

Echarts 中的数据Zoom组件用于控制数轴的显示范围，通过dataZoom.xAxisIndex等属性指定控制的数轴。它可以设置为slider类型，允许用户通过拖动来缩放数据视图。当多个dataZoom组件共同作用于同一数轴时，它们会自动联动，提供流畅的交互体验。例如，配置项中展示了如何创建一个只控制X轴的滑动数据Zoom。

✦ dataZoom 和数轴的关系 ✦

dataZoom 主要是对 数轴（axis） 进行操作（控制数轴的显示范围，或称窗口（window））。

可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 或 dataZoom.radiusAxisIndex 或 dataZoom.angleAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。

dataZoom 组件可 同时存在多个，起到共同控制的作用。如果多个 dataZoom 组件共同控制同一个数轴，他们会自动联动。

实现效果：

 //配置项：
this.insuranceOption = {
    // 拖拽X轴
    dataZoom: [
            {
              type: "slider",//inside鼠标缩放
              show: true,
              start: 0,
              end: 50,
              xAxisIndex: [0],
            }
   ],
}