Echarts 通过dataZoom，实现x轴和y轴放大缩小

需求一：X 轴放大缩小

option = {
  xAxis: {
    type: 'category',
    data: [1000, 2000, 3000, 4000, 5000, 6000, 7000],
  },
  dataZoom: {
		type: 'inside',  //放大缩小x轴数值
	}, 
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
};

需求二：Y 轴放大缩小

 dataZoom:[{
    type: 'inside', // 放大和缩小
    orient: 'vertical',
   },],

需求三：x轴和y轴都可以缩放

 dataZoom:[{
    type: 'inside', // 放大和缩小
    orient: 'vertical',
   },{
    type: 'inside', 
   }],

需求四：实现x轴下方滚动条拖拽

option = {
  xAxis: {
    type: 'category',
    data: [1000, 2000, 3000, 4000, 5000, 6000, 7000],
  },
  dataZoom:[{
    type: 'inside', // 放大和缩小
    orient: 'vertical',
   },{
    type: 'inside', 
   },{
      // start: 0,//默认为0
      // end: 100,//默认为100
     type: 'slider',
     show: true,
     // xAxisIndex: [0],
     handleSize: 0,//滑动条的 左右2个滑动条的大小
     startValue: 0, // 初始显示值
     endValue: 500000, // 结束显示值,自己定
     height: 5,//组件高度
     left: '10%', //左边的距离
     right: '10%',//右边的距离
     bottom: 15,//底边的距离
     borderColor: "#ccc",
     fillerColor: '#4cccfe',
     borderRadius: 5,
     backgroundColor: '#efefef',//两边未选中的滑动条区域的颜色
     showDataShadow: false,//是否显示数据阴影 默认auto
     showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
     realtime: true, //是否实时更新
     filterMode: 'filter',
    }],
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: 'line',
      smooth: true
    }
  ]
};