echart数据第一次渲染不成功（解决echarts获取数据不渲染的问题）

写在前面

    本菜鸟第一次接到echarts的需求  
  
  
  
  
  
 ，就搞了整整一天 
  
  
  
  
  
 ，需求是这样的：①单线图表


 


 


 


 


 


 
，只有一个系列  
  
  
  
  
  
 。②多线图表 
 
 
 
 
 
，根据返回的数据系列生成不同的折现  
   
   
   
   
   
  ，形成一个堆叠折线图 
  
  
  
  
  
 。③选单天的话

 

 

 

 

 

 
，那么就以24小时为横坐标；如果是选择了一段时间
 

 

 

 

 

 
，那么这个时间范围就以天为单位作为横坐标


 


 


 


 


 


 
。

    于是乎             ，请求接口数据花了五分钟
 

 
 

 
 

 
 

 
 

 
 

 
，调试问题七小时属于是











，这个过程中                   ，有异步的问题  
  
  
  
  
  
 、监听外部切换时间范围的问题 
  
  
  
  
  
 、刷新数据时要先初始化原来的数据的问题
 
 
 
 
 
 
 
 
 
 
 
 
，数据对应的问题等等 
 
 
 
 
 
。

    好记性不如烂笔头

















，在此简单记录一下吧  
   
   
   
   
   
  。

踩坑与解决 

一.首先是异步问题 

问题：

        接口请求回来了数据             ，并且格式也已经全部处理成和死数据一样了
 
  
 
  
 
  
 
  
 
  
 
  
，然而











，死数据可以显示  
  
  
  
  
  
 ，接口请求回来的数据却一直不能挂到图表上去

 

 

 

 

 

 
。最后才发现 
  
  
  
  
  
 ，每次都是先渲染了图表


 


 


 


 


 


 
，我的数据才回来
 

 

 

 

 

 
。

什么是异步请求和什么是同步请求？

1. 同步请求：客户端向服务端发送请求 
 
 
 
 
 
，服务端响应以后客户端才渲染页面

2. 异步请求：客户端向服务端发送请求  
   
   
   
   
   
  ，客户端不等服务端响应就行行页面渲染

 

 

 

 

 

 
，一般做页面的局部刷新             。

       造成上面原因就是我的页面向服务端发送请求
 

 

 

 

 

 
，页面不等服务端响应就已经渲染图表             ，尽管后面数据请求成功但此时页面已经渲染成功
 

 
 

 
 

 
 

 
 

 
 

 
，页面此时只知道他所渲染图表时数据为空











，所以不会显示数据
 

 
 

 
 

 
 

 
 

 
 

 
。

        最终用一个很不正规的方法解决了问题：

mounted () { setTimeout(() => { this.init() }, 500) },

 二.其次是外部时间范围切换                   ，数据不会自动刷新的问题

问题：

        由于时间选择器写在父组件里面
 
 
 
 
 
 
 
 
 
 
 
 
，图表放在子组件里面

















，我用 searchParams当props传进来             ，但是发现只有第一次打开才会渲染
 
  
 
  
 
  
 
  
 
  
 
  
，后面再在外面切换时间范围











，子组件的图表没变化  
  
  
  
  
  
 ，方法也没调用











。

解决：

        最终用watch解决 
  
  
  
  
  
 ，给图表的div加一个id


 


 


 


 


 


 
，然后每次切换时间 
 
 
 
 
 
，就刷新图表                   。

        注意：每次刷新都要把列表清空  
   
   
   
   
   
  ，不然会越push列表越长

 

 

 

 

 

 
，图表越刷新越密集
 
 
 
 
 
 
 
 
 
 
 
 
。

watch: { searchParams: { deep: true, immediate: true, handler () { this.dataList = [] this._getTrend() setTimeout(() => { this.init(document.getElementById(tendency_)) }, 500) } } },

子组件中：

props: { searchParams: Object, }

父组件中：

<tendency v-if="activeName==vnode" :search-params="searchParams"></tendency> searchParams: { startDate: moment().startOf(day).format(YYYY-MM-DD HH:mm:ss), endDate: moment().endOf(day).format(YYYY-MM-DD HH:mm:ss) },

 小白狂踩坑系列