<template>
  <div class="echarts_cap">
    <div :id="'echart' + texter.id" style="height: 100%" :key="texter.id"></div>
  </div>
</template>
<script>
import { pillar } from "@/utils/app-ecahrts";
export default {
  props: {
    texter: {
      type: Object,
      default: () => ({}),
    },
  },
  watch: {
    "texter.data": {
      handler(val) {
        this.init();
      },
    },
  },
  data() {
    return {};
  },
  // created() {
  //   this.init();
  // },
  methods() {
    this.init();
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(
        document.getElementById("echart" + this.texter.id)
      );
      //统计折线
      pillar.series[0].data = this.texter.data;
      pillar.title.text = this.texter.name;
      pillar.title.subtext = this.texter.kaer
        ? this.texter.cont + "%"
        : this.texter.cont.toString();
      // pillar.tooltip.formatter = this.texter.formatter
      //   ? this.texter.formatter
      //   : "{c}";
      pillar.title.top = this.texter.top;
      pillar.series[0].color = this.texter.color;
      pillar.series[0].name = this.texter.name2;
      pillar.series[1].name = this.texter.name2;
      pillar.series[1].data = [this.texter.cont];
      myChart.clear();
      myChart.setOption(pillar, true);
      window.onresize = () => {
        myChart.resize();
      };
      myChart.on("click", (a, b) => {
        let obj = {
          namefa: a.seriesName,
          namech: a.name,
        };
        this.$emit("echar", obj);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.echarts_cap {
  width: 100%;
  height: 100%;
}
</style>