Vue中使用echart

<template>
  <div ref="charts" class="canvas"></div>
</template>
<script>
import echarts from 'echarts';
import { getLineOption } from './echart.line.config.js';
export default {
  props: {
    dataRes: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      myChart: null,
      dataList: []
    }
  },
  watch: {
    // 每当数据发送变化时，重新进行图表渲染
    dataRes() {
      this.echartRender();
    }
  },
  mounted() {
    this.myChart = echarts.init(this.$refs.charts);
    this.echartRender();
  },
  beforeDestroy() {
    this.myChart.dispose();
  },
  methods: {
    // 渲染echart数据
    echartRender() {
      const option = getLineOption(this.dataList);
      this.myChart.setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>
.canvas{
  width: 948px;
  height: 364px;
}
</style>