manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/components/echartsEchar.vue

<template>
  <div :id="uuid" :style="style"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props: {
    height: {
      type: String,
      default: "100%",
    },
    width: {
      type: String,
      default: "100%",
    },
    options: {
      type: Object,
      default: null,
    },
    widthHtval: {
      type: [String, Boolean],
      default: false
    },
    clickOnTheEvent: { // 是否开启点击事件
      type: [Boolean],
      default: false
    },
    updateChartSize: { // 是否需要自动更新图表的大小
      type: [Boolean],
      default: false
    }
  },
  components: {},
  data() {
    return {
      uuid: null,
      myChart: null,
    };
  },
  computed: {
    style() {
      return {
        height: this.height,
        width: this.width,
      };
    },
  },
  watch: {
    options() {
      if (this.myChart) {
        if (this.widthHtval) {
          this.myChart.resize({
            width: this.widthHtval
          })
        }
        this.myChart.setOption(this.options, { notMerge: true });
        if (this.updateChartSize) {
          this.$nextTick(() => {
            this.myChart.resize(); // 在DOM更新后，调用resize方法更新图表大小
          });
        }
      }
    },
  },
  created() {
    this.uuid = this.idGen();
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById(this.uuid));
    this.myChart.setOption(this.options);
    if (this.clickOnTheEvent) {
      this.myChart.getZr().on('click', params => {
        this.$emit('chartClickEvents', { params, myChart: this.myChart })
      })
    }
  },
  methods: {
    // idGen() {
    //   return new Date().getTime();
    // },
    idGen() {
      const arr = new Uint8Array(16);
      window.crypto.getRandomValues(arr);
      arr[6] = (arr[6] & 0x0f) | 0x40; // 设置版本为 0100
      arr[8] = (arr[8] & 0x3f) | 0x80; // 设置变体为 10xx
      return [...arr].map((b) => ('00' + b.toString(16)).slice(-2)).join('').match(/.{1,8}/g).join('-');
    },
  },
  beforeDestroy() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  }
};
</script>

<style scoped lang="scss"></style>