解决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')
      },

 小白狂踩坑系列

标签 , ,

发表回复