<template>
  <div style="width: 100%; height: 100%"></div>
</template>
<script>
// import { deepClone } from "@/utils/js/common.js";
// import lodash from "lodash";
// import { getStatisticAges } from "@/api/dataAdmin.js";
export default {
  props: {
    info: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => {},
    },
    day: {
      type: String,
      default: () => "0",
    },
  },
  watch: {
    info() {
       this.getData()
    },
  },
  async mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      let label = this.info.map((item) => item.companyName);
      let value = this.info.map((item) => item.businessCardNums);
      this._initEcharts(label, value);
    },
    _initEcharts(label, value) {
      const myChart = this.$echarts.init(this.$el);
      const echarts = this.$echarts;
      let option = {
        legend: {
          // data: ["预约次数"],
          bottom: "5%",
          right: "center",
          itemWidth: 13,
          textStyle: {
            color: "#556677",
          },
        },
        grid: {
          left: "2%",
          right: "2%",
          top: "15%",
          bottom: "15%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: label,
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        series: [
          {
            data: value,
            // name: "预约次数",
            barWidth: "50%",
            type: "bar",
            itemStyle: {
              color: "#6194F8",
            },
          },
        ],
      };

      // if (this.option) {
      //   option = lodash.defaultsDeep(deepClone(this.option), option);
      // }
      myChart.setOption(option, true);
    },
  },
};
</script>
