echarts 放大与缩放的功能

// 内置型数据区域缩放组件（dataZoomInside）：内置于坐标系中，使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动（触屏上）来缩放或漫游坐标系。

// 滑动条型数据区域缩放组件（dataZoomSlider）：有单独的滑动条，用户在滑动条上进行缩放或漫游。

function getOption(titles, xData, legendDatta, series, top) {
  var option = {
    title: {
      text: titles,
      left: center
    },
    tooltip: {
      show: true,
      trigger: axis
    },
    grid: {
      top: top || 15%,
      left: 1%,
      right: 3%,
      bottom: 30rpx,
      containLabel: true
    },
    legend: { // 显示图例组件
      show: legendDatta ? true : false,
      data: legendDatta,
      bottom: 0,
      z: 100
    },
    dataZoom: { // 放大和缩放
      type: inside
    },
    xAxis: {
      type: category,
      boundaryGap: false,
      axisLabel: {
        showMinLabel: true
      },
      data: xData,
    },
    yAxis: {
      x: center,
      type: value,
      splitLine: {
        lineStyle: {
          type: dashed
        }
      }
    },
    series: series
  };
  return option;
}

如果是地图的放大与缩放，这个字段设置为roam: true

geo: {
     map: "china",
    // 开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 scale 或者 move。设置成 true 为都开启
     roam: true, 
     zoom: 1.1,
     scaleLimit: {//滚轮缩放的极限控制
},