vue封装echars通用组件

<!-- Echar -->
<template>
  <div :style="{'width': width, 'height': height}" ref="area"></div>
</template>

<script>
// 引入 ECharts
import echarts from 'echarts'

export default {
  name: "EChar",
  props: {
  	/*可以是百分比也可以是像素*/
    height: {
      type: String,
      default: '100%',
    },
    /*可以是百分比也可以是像素*/
    width: {
      type: String,
      default: '100%',
    },
    option: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      eChar: null,
    }
  },
  methods: {
    getInstance() {
      return this.eChar;
    }
  },
  watch: {
    option: function () {
      this.$nextTick(() => {
        this.eChar && this.eChar.setOption(this.option);
      })
    }
  },
  beforeDestroy() {
    this.eChar && this.eChar.destroy && this.eChar.destroy();
  },
  update() {
    this.$nextTick(() => {
      this.eChar && this.eChar.setOption(this.option);
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.eChar = echarts.init(this.$refs.area);
      this.eChar.setOption(this.option);
      this.eChar.on('click', params => this.$emit('click', params));
    })
  },
  created() {

  },
}
</script>

<style scoped>

</style>

使用：

<EChar :option="myOption" width="400px" height="400px;"/>

注意： option的值改变的时候记得浅拷贝一份

this.myOption = { ...this.myOption }