echarts实现双Y轴双滚动条

最新推荐文章于 2024-09-25 11:26:13 发布

since �

最新推荐文章于 2024-09-25 11:26:13 发布

阅读量698

点赞数

分类专栏： js常用功能文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/h5_since/article/details/128845863

版权

js常用功能专栏收录该内容

2 篇文章

订阅专栏

文章展示了如何在数据图表中设置两个独立的Y轴滚动条，且互不干扰。关键在于dataZoom配置，分别指定yAxisIndex为0和1来关联不同的Y轴，并自定义位置、类型、范围等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看一下效果
在这里插入图片描述

两个y轴各一个滚动条，且互补干扰。
下面是核心代码部分

//其他的代码不需要修改，只需要在dataZoom设置即可
dataZoom: [
          // 滚动条y1轴
          {
            yAxisIndex: 0, //代表的是第一个y轴的滚动条
            left: "1%", //设置位置，如果不设置就默认在右边，跟第二个y轴的滚动条在一起
            show: true,
            type: "slider",
            start: 50,
            end: 100,
            width: 20,
            filterMode: "none",
          },
          //滚动条y2轴
          {
            yAxisIndex: 1, //代表的是第二个y轴的滚动条
            show: true,
            type: "slider",
            start: 50,
            end: 100,
            width: 20,
            filterMode: "none",
          },
          //滚动条x轴
          {
            xAxisIndex: 0,
            show: true,
            type: "slider",
            start: 0,
            end: 100,
            height: 20,
            filterMode: "none",
          },
        ],