ECharts_CustomZoom

by tmtron

HTML

<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
<input type="button" value='max' onclick="zoomMax()" />
<button onclick="zoomPart()">zoom part</button>

JavaScript

var myChart = echarts.init(document.getElementById('main'));

data = [
  [80.9251933067, 207.9047427038],
  [52.8853803102, 337.7443022089],
  [25.9926385814, 120.3586150136]
];

function renderItem(params, api) {
  if (params.context.rendered) {
    return;
  }
  params.context.rendered = true;

  var points = [];
  for (var i = 0; i < data.length; i++) {
    points.push(api.coord(data[i]));
  }
  var color = api.visual('color');
  return {
    type: 'polygon',
    shape: {
      points
    },
    style: api.style({
      fill: color,
      stroke: echarts.color.lift(color)
    })
  };
}

var filterMode = 'empty';
option = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['bar', 'error']
  },
  dataZoom: [{
    type: 'slider',
    filterMode: filterMode,
    height: 8,
    bottom: 20,
    borderColor: 'transparent',
    backgroundColor: '#e2e2e2',
    handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line
    handleSize: 20,
    handleStyle: {
      shadowBlur: 6,
      shadowOffsetX: 1,
      shadowOffsetY: 2,
      shadowColor: '#aaa'
    }
  }, {
    type: 'inside',
    filterMode: filterMode
  }],
  xAxis: {
  	min: 0,
    max: 100
  },
  yAxis: {},
  series: [{
    type: 'custom',
    clip: 'true',
    renderItem: renderItem,
    data: data
  }]
};
myChart.setOption(option);


function zoomMax() {
  console.log('zoomMax');
  myChart.dispatchAction({
    type: 'dataZoom',
    start: 0,
    end: 100
  });
}

function zoomPart() {
  console.log('zoomPart');
  myChart.dispatchAction({
    type: 'dataZoom',
    start: 40,
    end: 60
  });
}