Echarts 数据区域缩放组件（dataZoom）

var data1 = [];
var data2 = [];
var data3 = [];
var random = function (max) {
  return (Math.random() * max).toFixed(3);
};
for (var i = 0; i < 500; i++) {
  data1.push([random(15), random(10), random(1)]);
  data2.push([random(10), random(10), random(1)]);
  data3.push([random(15), random(10), random(1)]);
}
option = {
  animation: false,
  legend: {
    data: ['scatter', 'scatter2', 'scatter3']
  },
  tooltip: {},
  xAxis: {
    type: 'value',
    min: 'dataMin',
    max: 'dataMax',
    splitLine: {
      show: true
    }
  },
  yAxis: {
    type: 'value',
    min: 'dataMin',
    max: 'dataMax',
    splitLine: {
      show: true
    }
  },
  //dataZoom 组件是对数轴（axis） 进行 数据窗口缩放 和 数据窗口平移 操作。
  //dataZoom 的运行原理是通过 数据过滤 来达到 数据窗口缩放 的效果。数据过滤模式的设置不同，效果也不同
  //dataZoom 的数据窗口范围的设置，目前支持两种形式：百分比形式：参见 dataZoom.start 和 dataZoom.end。绝对数值形式：参见 dataZoom.startValue 和 dataZoom.endValue。
 // 这个dataZoom组件，默认控制x轴。
  dataZoom: [
    {
      // 这个 dataZoom 组件是 slider 型 dataZoom 组件
      type: 'slider',
      show: true,
      xAxisIndex: [0],
      start: 1, // 左边在 1% 的位置。
      end: 35,// 右边在 35% 的位置。
    },
    {
      type: 'slider',
      show: true,
      yAxisIndex: [0],
      left: '93%',
      start: 29,
      end: 36
    },
    {
      type: 'inside',// 这个 dataZoom 组件是 inside 型 dataZoom 组件
      xAxisIndex: [0],
      start: 1, // 左边在 1% 的位置。
      end: 35// 右边在 35% 的位置。
    },
    {
      type: 'inside',
      yAxisIndex: [0],
      start: 29,
      end: 36
    },
  ],
  series: [
    {
      name: 'scatter',
      type: 'scatter',
      itemStyle: {
        normal: {
          opacity: 0.8
        }
      },
      symbolSize: function (val) {
        return val[2] * 40;
      },
      data: data1
    },
    {
      name: 'scatter2',
      type: 'scatter',
      itemStyle: {
        normal: {
          opacity: 0.8
        }
      },
      symbolSize: function (val) {
        return val[2] * 40;
      },
      data: data2
    },
    {
      name: 'scatter3',
      type: 'scatter',
      itemStyle: {
        normal: {
          opacity: 0.8
        }
      },
      symbolSize: function (val) {
        return val[2] * 40;
      },
      data: data3
    }
  ]
};