SZHY2.0/src/views/securityCheck/components/graphicHome.vue

<template>
  <div class="echarts_cap">
    <div :id="`chart_${id}`" style="height: 100%"></div>
  </div>
</template>
<script>
import { pillar } from "@/utils/app-ecahrts";
export default {
  props: {
    id: {
      type: [String, Number],
      default: 1,
    },
    texter: {
      type: Object,
    },
  },
  watch: {
    texter: function (val) {
      if (val) {
        alert(val);
        this.init();
      }
    },
  },
  data() {
    return {};
  },
  // mounted() {
  //   if (this.texter) {
  //     this.init();
  //   }
  // },
  methods: {
    init() {
      let myChart = this.$echarts.init(
        document.getElementById(`chart_${this.id}`)
      ); //统计折线
      pillar.series[0].data = this.texter.data;
      pillar.title.text = this.texter.name;
      pillar.title.subtext = this.texter.cont;
      pillar.title.top = this.texter.top;
      pillar.series[0].color = this.texter.color;
      myChart.clear();
      myChart.setOption(pillar, true);
      // myChart.setOption(pillar);
      window.onresize = () => {
        myChart.resize();
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.echarts_cap {
  width: 100%;
  height: 100%;
}
</style>