[JavaScript知识库]echarts 区域缩放

type: 'inside' 为内置控件可通过滑轮放大缩小
type:'slider'为外部滑动控件，需要通过鼠标拖拽滑动块?

dataZoom: [
  {   
      // 这个dataZoom组件，默认控制x轴。
      type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
      start: 10,      // 左边在 10% 的位置。
      end: 60         // 右边在 60% 的位置。
  },
  {   
      // 这个dataZoom组件，也控制x轴。
      type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件
      start: 10,      // 左边在 10% 的位置。
      end: 60         // 右边在 60% 的位置。
   },
   {
      type: 'slider',
      yAxisIndex: 0,
      start: 30,
       end: 80
   },
   {
       type: 'inside',
       yAxisIndex: 0,
       start: 30,
       end: 80
   }
],

我的运用:

        dataZoom: [ //给x轴设置滚动条
            {
              start: 0, //默认为0
              end: 60 , //9代表x轴data.length,8代表可展示的最大数 越小间隔越大
              type: 'slider',
              show:true,
              showDetail: false, //是否显示detail 文字
              xAxisIndex: [0],
              handleSize: 15, //滑动条的 左右2个滑动条的大小
              height: 10, //组件高度
              bottom: 5, //下边的距离
              handleColor: '#ddd', //h滑动图标的颜色
              handleStyle: {
                borderColor: "#cacaca",
                borderWidth: "1",
                shadowBlur: 2,
                background: "#ddd",
                shadowColor: "#ddd",
              }
            },
            {
              type: 'inside',
              start: 0, //默认为1
              end: 60, //9代表x轴data.length,8代表可展示的最大数 越小间隔越大
              xAxisIndex: [0],
            }
          ],

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖