笔记：关于VUE项目渲染echarts折线图的问题

数据是后台传过来的，每次刷新页面或者重新创建时数据不显示；

我百度的回答：

这个组件在执行mounted()的时候可能ajax还没拿到数据，虽然后面通过props补进来了，但是表单没有刷新。

你可以先在mounted里面把数据console.log一下，看看那个时候是不是已经拿到数据了

父组件在子组件的标签上用v-if="this.time.length" ,之类的处理，等数据到了再渲染

子组件里面用watch监听一下props的变化，有变化就调用一下this.drawLine()重绘一下

子组件监听数据的变化，一旦数据改变，重新渲染数据放进图表

  watch: {
    xline() {
      this.drawline();
    },
    yline1() {
      this.drawline();
    },
    yline2() {
      this.drawline();
      //   deep: true; //对象内部属性的监听。
    }
  },

父组件等数据拿到之后再渲染图表

  <chartline v-if="info.list.length" :xline="xline" :yline1="yline1" :yline2="yline2" />

监听窗口变化echarts重新渲染

 var myChart = echarts.init(document.getElementById("myChart"));
    window.onresize = () => {
      myChart.resize();
    };