ECharts · Example

option = {
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['选定区间数据']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {readOnly:false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    dataZoom : {
        show : true,
        realtime : false,
        start : 0,
        end : 10,
        xAxisIndex:1
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : true,
            data : function (){
                var list = [];
                for (var i = 0; i < 10; i++) {
                    list.push(i);
                }
                return list;
            }()
        },
        {
            type : 'category',
            name:'隐藏全局',
            boundaryGap : true,
            data : function (){
                var list = [];
                for (var i = 0; i < 100; i++) {
                    list.push(i);
                }
                return list;
            }(),
            splitLine: {show:false},
            splitArea: {show:false}
        }      
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'选定区间数据',
            type:'line',
            data:function (){
                var list = [];
                for (var i = 0; i < 10; i++) {
                    list.push(Math.round(Math.random()* 30) + 30);
                }
                return list;
            }()
        },
        {
            name:'全局',
            type:'line',
            symbol:'none',
            itemStyle:{  
              normal:{
                color:'rgba(0,0,0,0)'
              }
            },
            data:function (){
                var list = [];
                for (var i = 0; i < 100; i++) {
                    list.push(Math.round(Math.random()* 10));
                }
                return list;
            }(),
          xAxisIndex:1
        }
    ]
};
var ecConfig = require('echarts/config');
function getData(param) {
  var start = param.zoom.start;
  var end = param.zoom.end;
  var curOption = this.getOption();
  curOption.xAxis[0].data = function (){
    var list = [];
    for (var i = start; i < end; i++) {
      list.push(i);
    }
    return list;
  }();
  curOption.series[0].data = function (){
    var list = [];
    for (var i = start; i < end; i++) {
      list.push(Math.round(Math.random()* 30) + 30);
    }
    return list;
  }();
  myChart.setOption(curOption,true)
}

myChart.on(ecConfig.EVENT.DATA_ZOOM, getData);

切换主题