Echarts 显示指定区域内容 + 不允许控制缩放

news2024/10/6 1:41:50

需求

在开发中，遇到如下一个需求，要展示指定区域的图形，并控制其不允许缩放

分析

第一想到的就是控件 dataZoom 中设置指定展示的区域，总结如下

解决

示例

在这里插入图片描述

源码

  option: {
    xAxis: {
      type: "category",
      data: ["A", "B", "C", "D", "E", "F", "G"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "line",
      },
    ],
    // 添加dataZoom组件
    dataZoom: [
      {
        // X 轴设置dataZoom类型为slider
        type: "slider",
        show: false,
        // 锁定选择区域的大小
        zoomLock: true,
        // 设置dataZoom的范围，百分比表示
        start: 20,
        end: 80,
        // 控制手柄的尺寸
        handleSize: '80%',
        // 两侧缩放手柄的样式配置
        handleStyle: {
          color: '#fff',
          shadowBlur: 3,
          shadowColor: 'rgba(0,0,0,0.6)',//阴影颜色
          shadowOffsetX: 2,// 阴影水平方向上的偏移距离
          shadowOffsetY: 2,// 阴影垂直方向上的偏移距离
        }
      },
      {
        // 设置dataZoom类型为inside
        type: "inside",
        // 设置dataZoom的范围，百分比表示
        xAxisIndex: [0],
        start: 20,
        end: 80,
      },
    ],
  }

X 轴设置dataZoom类型为slider
type: “slider”,
是否展示
show: false,
锁定选择区域的大小
zoomLock: true,
设置dataZoom的范围，百分比表示
start: 20,
end: 80,
控制手柄的尺寸
handleSize: ‘80%’,
两侧缩放手柄的样式配置
handleStyle: {
color: ‘#fff’,
shadowBlur: 3,
阴影颜色
shadowColor: ‘rgba(0,0,0,0.6)’,
阴影水平方向上的偏移距离
shadowOffsetX: 2,
阴影垂直方向上的偏移距离
shadowOffsetY: 2,
}