<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,
    },
  },
  data() {
    return {};
  },
  mounted() {
    if (this.texter) {
      this.init();
    }
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(
        document.getElementById(`chart_${this.id}`)
      ); //统计折线
      console.log(myChart.series);
      pillar.title.text = this.texter.name;
      pillar.title.subtext = this.texter.cont;
      pillar.series[0].color = this.texter.color;
      if (this.texter.textStyle) {
        pillar.title.textStyle = this.texter.textStyle;
      }
      if (this.texter.subtextStyle) {
        pillar.title.subtextStyle = this.texter.subtextStyle;
      }
      if (this.texter.top) {
        pillar.title.top = this.texter.top;
      }
      if (this.texter.data) {
        pillar.series[0].data = this.texter.data;
      }
      myChart.setOption(pillar);
      window.onresize = () => {
        myChart.resize();
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.echarts_cap {
  width: 100%;
  height: 100%;
}
</style>