echarts拖動滾動條，實現數據加載效果

<template>
<!--  拖動dataZoom加載數據-->
  <div class="demo2" v-loading="loading">
    <div id="echart1"></div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  export default {
    name:'demo2',
    data(){
      return{
        total:30,
        loading:false,
        echartsData:[
          {time:'2019-12-25',bmp:120},
          {time:'2019-12-26',bmp:125},
          {time:'2019-12-27',bmp:130},
          {time:'2019-12-28',bmp:136},
          {time:'2019-12-29',bmp:141},
          {time:'2019-12-30',bmp:142},
          {time:'2019-12-31',bmp:120},
          {time:'2020-01-01',bmp:125},
          {time:'2020-01-02',bmp:120},
          {time:'2020-01-03',bmp:110},
          {time:'2020-01-04',bmp:160},
          {time:'2020-01-05',bmp:100},
          {time:'2020-01-06',bmp:150},
          {time:'2020-01-07',bmp:126},
          {time:'2020-01-08',bmp:136},
        ]
      }
    },
    mounted() {
      this.getEcharts()
    },
    methods:{
      getEcharts(){
        let that = this
        let mychart=echarts.init(document.getElementById('echart1'))
        let dataX=[]
        let dataY=[]
        that.echartsData.map(item=>{
          dataX.push(item.time)
          dataY.push(item.bmp)
          return item
        })
        let num=Math.floor(that.echartsData.length/6)
        let startVal=0
        if(that.echartsData.length>15){
          startVal=(num-2)*6
        }
        let option={
          xAxis: {
            type: 'category',
            data:dataX
          },
          yAxis: {
            type: 'value',
            // scale: true,
            name: 'BMP',
          },
          dataZoom : [ //內置型數據區域縮放組件，  （平移：在坐標系中滑動拖拽進行數據區域平移）
            {
              show:true,
              xAxisIndex:[0],
              type:'slider',
              bottom:'0',
              left:'center',
              startValue:startVal,
              endValue:startVal+6,
              orient:'horizontal'
            },
          ],
          series: [{
            data:dataY,
            type: 'line',
            // smooth: true,
            showAllSymbol: true,  //顯示全部的折線點
            symbol:'circle',
            symbolSize:8,
            hoverAnimation: false,
            itemStyle:{
              normal:{
                color:'#2ECD70', //改變折線點的顏色
                lineStyle:{
                  color:'#2ECD70', //連線的顏色
                }
              }
            },

          }],
        }
        mychart.setOption(option)
        let startArr=[]
        mychart.on( 'datazoom', function (params) {
          startArr.push(params)
          if(startArr.length>1){
　　　　　　　let lastVal=startArr[startArr.length-1].end      //拖動動作完成后的最后一條

　　　　　　　let lastVal2=startArr[startArr.length-2].end   //拖動動作完成后的倒數第二條

　　　　　　//判斷是否在向右拖動  判斷數據是否全部請求完成  判斷在什么位置開始加載
　　　　　　　if(lastVal>lastVal2 && that.echartsData.length<that.total && startArr[startArr.length-1].end>85){  
  　　　　　　　　that.getAsynaData()
　　　　　　　}

          }
        });
      },
      getAsynaData(){
        this.loading=true
        let newData=[
          {time:'2020-01-09',bmp:'109'},
          {time:'2020-01-10',bmp:'124'},
          {time:'2020-01-11',bmp:'135'},
          {time:'2020-01-12',bmp:'146'},
          {time:'2020-01-13',bmp:'132'},
          {time:'2020-01-14',bmp:'128'},
          {time:'2020-01-15',bmp:'119'},
        ]
        setTimeout(()=>{
          this.loading=false
        },500)
        newData.forEach(item=>{
          this.echartsData.push(item)
        })
        this.getEcharts()
      }
    }
  }
</script>
<style scoped lang="scss">
  .demo2{
    padding:40px;
    #echart1{
      width:100%;
      height: 600px;
    }
  }
</style>