echarts的坐标轴添加滚轮

最新推荐文章于 2025-07-16 10:10:29 发布

原创最新推荐文章于 2025-07-16 10:10:29 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

项目实战遇到的问题专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了Echarts中针对单个y轴和x轴的数据窗口缩放组件(dataZoom)配置，包括slider类型和inside类型的使用，以及start和end属性来设定数据可视范围。通过调整left、bottom等属性，实现滚动条在图表中的位置定制，帮助用户更有效地查看和分析数据。

部署运行你感兴趣的模型镜像

单个y轴

dataZoom: [
    {
        type: 'slider',
        show: true,
        yAxisIndex: [0],
        left: '93%',
        start: 0, //数据窗口范围的起始百分比
        end: 36
    },
    {
        type: 'inside',
        yAxisIndex: [0],
        start: 0,
        end: 36
    }
]

单个x轴

dataZoom: [
          {
            type: "slider",
            show: true, // flase直接隐藏图形
            xAxisIndex: [0],
            left: "9%", // 滚动条靠左侧的百分比
            bottom: -5,
            start: 10, // 滚动条的起始位置（10%）
            end: 90, // 滚动条的终止位置（90%）
          },
        ],

您可能感兴趣的与本文相关的镜像