Vue.component("power-chart", {
  template: `
    <div>
        <div :id="id" :class="className" :style="{ height, width }"></div>
    </div>
    `,
  props: {
    id: {
      type: String,
      default: "barChart1",
    },
    className: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "400px",
    },
    height: {
      type: String,
      default: "400px",
    },
    render: {
      type: Function,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.chart = window.echarts.init(document.getElementById(this.id));
    setTimeout(() => {
      this.setOption({});
    }, 400);
    // 大小自适应
    window.addEventListener("resize", () => {
      this.chart.resize();
    });
  },
  methods: {
    reLoad(){
      let opt={};
      if (this.render) {
        opt = this.render(opt);
      }
      this.chart.setOption(opt,true);
    },
    setOption(opt) {
      if (this.render) {
        opt = this.render(opt);
      }
      this.chart.setOption(opt);
    },
  },
});