Vue中使用Echarts 脱坑

1. 数据问题，不像官方实例所提供的数据直接写在options对应的数据源里，开发中应当是后端接口请求过来的数据，一般来说，会将echarts图标抽成组件的形式，需要的数据源通过父组件传给子组件，但是遇到的问题就是，图表会木有数据的问题（图表会展示出来，但是没有数据，尴尬），这是因为echats实例在dom渲染前没有拿到数据，在子组件中使用watch侦听父组件传过来的数据即可，如果有再挂载dom，这样就做到了页面没数据的问题

2. 图表响应式的问题，因为echarts图表是canvas画布生成的，所以说在创建都没元素的时候就应当指定宽高，但是直接将style属性写死宽高做不到图表的响应式，这时候通过父组件获取到图表的父级宽高传给子组件绑定，然后使用window.onresize() 方法的回调设置响应式图表

 

父组件：

<template>
  <div class="home" ref="home">
    <echarts :widthheight="style" :echartsData="echartsData"></echarts>
  </div>
</template>

<script>
import echarts from "../components/echarts";
export default {
  components: {
    echarts
  },
  data() {
    return {
      style: {
        width: "",
        height: "250px"
      },
      echartsData: {} //图的数据
    };
  },
  created() {
    this.echartsData = {
      X: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      Y: [820, 932, 901, 934, 1290, 1330, 1320]
    };
  },
  mounted() {
    this.style.width = this.$refs["home"].offsetWidth; //获取父元素的宽度
  }
};
</script>

<style>
.home {
  margin: 50px;
  border: 1px solid grey;
  height: 300px;
}
</style>

子组件：

<template>
  <div ref="var_echarts" :style="widthheight"></div>
</template>

<script>
export default {
  props: ["widthheight", "echartsData"],
  data() {
    return {
      myChart: {} //用来保存echarts图这个实例
    };
  },
  watch: {
      echartsData: function(newval, oldval) {
          if(newval) {
              this.drawBar();
          }
      }
  },

  mounted() {
    this.$nextTick(() => {
      this.drawBar();
    });
    window.onresize = () => {
      this.myChart.resize(); //跟对屏幕的宽度变化而变化
    };
  },
  methods: {
    drawBar() {
      this.myChart = this.$echarts.init(this.$refs.var_echarts);
      this.myChart.setOption({
        xAxis: {
          type: "category",
          data: this.echartsData.X    //
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: this.echartsData.Y,  //
            type: "line"
          }
        ]
      });
    }
  }
};
</script>