erp-el-element/CommonInput/ErpEchart.vue

<template>
  <div :id="uuid" :style="style"></div>
</template>
  
  <script>
import * as echarts from "echarts";
const idGen = () => {
  return new Date().getTime();//如果循环这个图表这个id需要传值
};

export default {
  name:'erpEcharts',
  props: {
    height: {
      type: String,
      default: "400px",
    },
    width: {
      type: String,
      default: "600px",
    },

    options: {
      type: Object,
      default: null,
    },
  },

  data() {
    return {
      uuid: null,
      myChart: null,
    };
  },

  watch: {
    width(a, b) {
      if (this.myChart) {
        // 这里需要异步才能生效
        setTimeout(() => {
          this.myChart.resize({
            animation: {
              duration: 500,
            },
          });
        }, 0);
      }
    },
    options() {
      if (this.myChart) {
        // notMerge 可选。是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。
        //合并的规则，详见 组件合并模式。如果为 true，表示所有组件都会被删除，然后根据新 option 创建所有新组件
        this.myChart.setOption(this.options, {
          notMerge: true,
        });
      }
    },
  },

  computed: {
    style() {
      return {
        height: this.height,
        width: this.width,
      };
    },
  },

  created() {
    this.uuid = idGen();
  },

  mounted() {
    // 准备实例
    this.myChart = echarts.init(document.getElementById(this.uuid));

    // 应用配置项
    this.myChart.setOption(this.options);
  },
};
</script>