echarts之dataZoom之后数据溢出异常论之-会英语的程序员才是牛的程序员

正常的如下，但是不正常的就是在滑动时会溢出到数据轴之外，最后发现是echarts版本问题，如下图，此处充分的证明了会英语的程序员才是牛逼的程序员，共勉之。当然，来得早不如来得巧，要是早一个月写项目，我就难玩了呀：

附上代码：

option = {
  dataZoom: [{
    type:'slider',
    yAxisIndex: ['0','1'],
    show: true,
    realtime: true,
    x: 1200,
    height: 600,
    width:8,
    start: 20,
    end: 80,
    borderColor: 'rgba(0,255,255,0)',
    backgroundColor: 'rgba(0,255,255,0.16)',
    fillerColor:'#04b8ca'  //选中范围的填充颜色。

  }],
  legend:{
    orient: 'horizontal', // 'vertical'
    x: '66%', // 'center' | 'left' | {number},
    y: 'bottom', // 'center' | 'bottom' | {number}
    data: [
      {
        name:'女生',
        textStyle:{
          fontWeight:'bolder',
          color:'#ffffff'
        }

      },
      {
        name:'男生',
        textStyle:{
          fontSize:12,
          fontWeight:'bolder',
          color:'#ffffff'
        }

      }
    ]

  },
  // tooltip（提示框组件）
  tooltip: {
    //trigger(触发类型)，可选'item','axis','none'
    trigger: 'axis',
    axisPointer: {
      //指示器类型,可选'line','shadow','cross'
      type: 'shadow'
    },
    // 自定义提示内容
    formatter: function(a){
      let v = a[0];
      return v.name + '<br/>' + v.marker +v.seriesName + '：'+ Math.abs(v.value);
    }
  },
  xAxis: [{
    type: 'value',
    min:-100,max:0,
    gridIndex: 0,
    axisTick:{show: false, inside:false},
    axisLabel : {
      show: true,
      color: '#00ffff',
      formatter: function(data){
        return -data
      },
    },
    axisLine: {// Y轴轴线样式
      show: true,
      lineStyle:{
        color:'rgba(224,224,224,0.3)',
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        type:'dashed',
        color: 'rgba(193,210,222,0.2)'
      }
    },

    position:"top"
  },{
    type: 'value',
    gridIndex: 1, min:0,max:100,
    axisTick:{show: false}, //是否显示刻度
    axisLine: {// Y轴轴线样式
      show: true, // 是否显示X轴
      lineStyle:{
        color:'rgba(224,224,224,0.3)',
      }
    },
    axisLabel : {
      show: true,
      color: '#00ffff'
    },
    splitLine: {
      show: true,
      lineStyle: {
        type:'dashed',
        color: 'rgba(193,210,222,0.3)'
      }
    },
    position:"top"
  }],
  yAxis: [{
    type: 'category',
    gridIndex: 0,
    inverse: true,
    data:['学生1','学生2','学生3','学生4','学生5','学生6','学生7','学生8','学生7','学生8'],
    axisTick:{show:false},
    axisLabel : {show:false},
    axisLine: {// Y轴轴线样式
      show: false,
      lineStyle:{
        color:'#000',
      }
    }
  },{
    type: 'category',
    gridIndex: 1,
    inverse: true,
    data: ['学生9','学生10','学生11','学生12','学生13','学生14','学生15','学生16','学生15','学生16'],
    axisTick:{show:false},
    axisLabel : {
      show:false
    },
    axisLine: {
      show: false //是否显示轴线
    }
  }
  ],
  grid: [{
    top: 50,
    width: '40%',
    left: 35,gridIndex: 0,
  }, {
    top: 50,
    left: '50%',gridIndex: 1,
  }],
  color:['#2FACFA','#F5A623'],
  series: [
    {
      name: '女生',
      type: 'bar',
      barWidth:'50',
      gridIndex: 0,
      xAxisIndex: 0,
      yAxisIndex: 0,
      itemStyle:{
        normal: {
          show: true,
          color: function (params){
            let colorList0 = [
              'rgba(255,111,79,0.2)',
              'rgba(255,111,79,0.3)',
              'rgba(255,111,79,0.4)',
              'rgba(255,111,79,0.5)',
              'rgba(255,111,79,0.6)',
              'rgba(255,111,79,0.7)',
              'rgba(255,111,79,0.8)',
              'rgba(255,111,79,1)'];
            return colorList0[params.dataIndex];
          },
          borderWidth:0,
          borderColor:'#333',
          label:{
            show:true,position:'left',
            formatter:function(v){
              return (v.value * -1);
            }
          }
        }
      },
      data: [-20, -30, -40, -50, -62, -70, -80, -90,-92,-95]
    },
    {
      name: '男生',
      type: 'bar',
      barWidth:'50',
      xAxisIndex: 1,
      yAxisIndex: 1,
      itemStyle:{
        normal: {
          show: true,
          color: function (params){
            let colorList = [
              'rgba(58,174,255,0.2)',
              'rgba(58,174,255,0.3)',
              'rgba(58,174,255,0.4)',
              'rgba(58,174,255,0.5)',
              'rgba(58,174,255,0.6)',
              'rgba(58,174,255,0.7)',
              'rgba(58,174,255,0.8)',
              'rgba(58,174,255,1)'];
            return colorList[params.dataIndex];
          },

          borderWidth:0,
          borderColor:'#333',
          label:{
            show:true,position:'right',
            formatter:function(v){
              return v.value;
            }
          }
        }
      },
      data: [20, 28, 30, 45, 58, 66, 75, 92,93,95]
    }

  ]
};