笔记:关于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();
    };
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 使用Vue在日常开发中会频繁接触和使用生命周期,在官方文档中是这么解释生命周期的: 每个 Vue 实例在被创...
    心_c2a2阅读 2,292评论 1 8
  • 深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...
    gaoer1938阅读 8,104评论 2 35
  • VUE介绍 Vue的特点构建用户界面,只关注View层简单易学,简洁、轻量、快速渐进式框架 框架VS库库,是一封装...
    多多酱_DuoDuo_阅读 2,742评论 1 17
  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,508评论 1 33
  • 谢谢作者的文章 非常喜欢 请允许收藏! 博客园首页博问闪存新随笔订阅管理 vue之better-scroll的封装...
    peng凯阅读 16,560评论 2 5