您现在的位置是：首页 >其他 >Echarts 显示指定区域内容 + 不允许控制缩放网站首页其他

需求

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

分析

第一想到的就是控件 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,
  }