echarts的坐标轴添加滚轮

原创于 2022-03-23 14:23:50 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

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

25 篇文章

订阅专栏

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

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

单个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%）
          },
        ],