echarts通过dataZoom，实现x轴和y轴放大缩小（亲测可用）

为满足项目需求，要求echarts图表实现和示波器曲线图一样的效果，x轴和y轴的数值可放大缩小，且x轴下方还要进度条，可以进行拖动显示。

1.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
    }
  ]
};

效果图1：

2.Y轴放大缩小：

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

2.效果图：

 3.x轴和y轴都可以缩放

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

3.效果图：

4.实现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
    }
  ]
};

效果图：

代码007普通

打赏 收藏 海报 链接