vue 使用echarts心得记录

1、对于组件传值的问题需要用到监听事件，以防视图不更新的情况出现，直接上代码：

watch: {
    // 观察option的变化
    option: {
      handler(newVal, oldVal) {
        if (this.chart) {
          if (newVal) {
            this.chart.setOption(newVal)
          } else {
            this.chart.setOption(oldVal)
          }
        } else {
          // this.initChart()
        }
      },
      deep: true // 对象内部属性的监听，关键。
    }
  }

2、对于父组件动态获取数据需要返回数据后才能进行渲染，针对这种情况，可以简单的用一个变量来控制渲染，v-if进行判断：

<rank 
      ref="zero"
      id="rank"
      :title="listQuery.year+'各点用户注册排行'"
       v-if="dataFlag"
      style="width:100%;height:600px;padding-top:24px;"
      :allData="rankObj"></rank>

其中v-if中的变量在获取数据前为false,数据返回后变为true,进行页面的渲染