vue+echarts 暂无数据显示，横坐标可拖拽条添加，可拖拽条动态设置默认显示时间跨度

对于echarts图表
目标：
1、切换维度日和月，选择筛选条件起始时间和结束时间，筛选的内容，
横坐标添加可拖拽显示的拖拽条，并且根据选择时间的数据量大小来设置默认显示的拖拽条宽度
2、当查询没有数据的时候，显示暂无数据

initEchart(){
   const  myCharts = this.$echarts.init(this.$refs.myCharts);//初始化echarts对象
   myCharts.showLoading({text: "数据加载中...",textColor:'#7a7878',color:'#57a2ff',lineWidth: 2});    //加载echarts loading        
   let params={
       date_type:this.formLabelAlign.disvalue ? 'm' : 'd',
       start_time:this.formLabelAlign.disvalue ? this.$moment(this.formLabelAlign.dateStart).format('YYYYMM') : this.$moment(this.formLabelAlign.dateStart).format('YYYYMMDD'),
       end_time:this.formLabelAlign.disvalue ? this.$moment(this.formLabelAlign.dateEnd).format('YYYYMM') : this.$moment(this.formLabelAlign.dateEnd).format('YYYYMMDD'),
       user_type:this.formLabelAlign.sarchType
   }
   let xAxisArr = []
   let yAxisArr = []
   this.$axios.post('/api/busi/product/v1/product/analyse/adduptrend',{},{
       params:params,
       headers:{
           'Content-Type':'application/x-www-formurlencoded',
           'usid':store.state.xaiot_token
       }
   }).then(res => {
       
       if(res.data.msg === 'success'){
           if(res.data.data.length === 0){//没有数据的时候显示暂无数据
               var html = `<span class="echarts-nodate"><i class="fontFamily yybzzanwushuju1"></i>暂无数据</span>`
               document.getElementById('myCharts').innerHTML = html
               document.getElementById('myCharts').removeAttribute('_echarts_instance_')
           }else{
               res.data.data.forEach((item,index) => {
                   xAxisArr.push(item.date)
                   yAxisArr.push(item.product_num)
               })
               let dataZoom=[
                       {
                           type: "slider",
                           realtime: true, //拖动滚动条时是否动态的更新图表数据
                           height: 25, //滚动条高度
                           start: 0, 
                           end: 100 
                       }
                   ]
               //根据维度日和月的切换，横坐标拖拽条的默认显示宽度计算 开始
               if(this.formLabelAlign.disvalue){//维度是月 this.formLabelAlign.disvalue为false是日
                   if(xAxisArr.length > 2){
                       dataZoom=[
                           {
                               type: "slider",
                               realtime: true, //拖动滚动条时是否动态的更新图表数据
                               height: 25, //滚动条高度
                               start: ((xAxisArr.length - 2)/xAxisArr.length).toFixed(2)*100, 
                               end: 100 
                           }
                       ]
                   }
               }else{//维度是日
                   if(xAxisArr.length > 7){
                       dataZoom=[
                           {
                               type: "slider",
                               realtime: true, //拖动滚动条时是否动态的更新图表数据
                               height: 25, //滚动条高度
                               start: ((xAxisArr.length - 7)/xAxisArr.length).toFixed(2)*100, 
                               end: 100 
                           }
                       ]
                   }
               }
               //根据维度日和月的切换，横坐标拖拽条的默认显示宽度计算 结束
               let options = {
                       title:{
                       text:'产品累计数趋势',
                       left:'center',
                       textStyle:{
                           color:'#6B6B6B',
                           fontSize:18
                       }
                       
                   },
                   grid:{
                       height:'auto',
                       left:'80',
                       right:'80'
                       
                   },
                   tooltip: {
                       trigger: 'axis',
                       textStyle:{
                   　　    align:'left'
               　　　　}
                   },
                   legend: {
                       data: ['数量'],
                       right:0,
                       top:60
                   },
                   // x轴拖动
                   dataZoom: dataZoom,
                   xAxis :  
                   {
                       type:"category",
                       name:'日期',
                       // interval:0,
                       nameTextStyle:{
                       color:'#6B6B6B'
                       },
                       data : xAxisArr,
                       axisTick:{
                           show:true,
                           inside:true,
                           lineStyle:{
                               color:'black'
                           }
                       },
                       axisLine:{
                           show:true,
                           lineStyle:{
                               color:'black'
                           }
                       },
                       axisLabel:{
                       
                           color:'#6B6B6B',
                           fontSize:10
                       }
                   },
                   yAxis: {
                       type: 'value',
                       name:'产品数量(个)',
                           nameTextStyle:{
                           color:'#6B6B6B'
                       },
                       axisLabel: {
                           margin: 2,
                           // formatter: function (value, index) {
                           //     if (value >= 10000 && value < 10000000) {
                           //         value = value / 10000 + "万";
                           //     } else if (value >= 10000000) {
                           //         value = value / 10000000 + "千万";
                           //     }
                           //     return value;
                           // }
                       },
                       axisTick:{
                                   show:true,
                                   inside:true,
                                   lineStyle:{
                                       color:'#6B6B6B'
                                   }
                       },
                       axisLine:{
                                   show:true,
                                   lineStyle:{
                                       color:'#6B6B6B'
                                   }
                       },
                       
                   },
                   series: [
                       
                       {
                           name: '数量',
                           type: 'line',
                           data: yAxisArr,
                           symbol:"diamond",
                           // smooth:true,
                           showSymbol:true,
                           symbolSize: 8,
                           lineStyle:{
                               color:'#336699'
                           },
                           itemStyle:{
                               color:'#FF6600',
                               borderWidth:20
                           },
                       }
                   ]
               }
               myCharts.setOption(options);
               window.addEventListener('resize',function(){
                   myCharts.resize()
               })
               
           }
       }
       myCharts.hideLoading();//关闭echarts loading
   }).catch(res => {
       myCharts.hideLoading();
       var html = `<span class="echarts-nodate"><i class="fontFamily yybzzanwushuju1"></i>暂无数据</span>`
       document.getElementById('myCharts').innerHTML = html
       document.getElementById('myCharts').removeAttribute('_echarts_instance_')

       console.log('error!')
   })
   
},