<template>
  <div class="pie-chart-progress">
    <div ref="chart" class="chart-container"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    data: {
      type: Array,
      //   required: true,
    },
  },
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      //   console.log(this.data);
      const chartContainer = this.$refs.chart;
      const chart = echarts.init(chartContainer);
      const options = {
        title: {
          text: `该项目共${this.data.length}名开发商`,
          left: "-0.3%",
          textStyle: {
            color: "#272727",
            fontSize: 16,
            fontWeight: "400",
          },
        },
        color: ["#5B8FF9", "#61DDAA "],
        legend: {
          top: "0%",
          left: "15%",
        },
        tooltip: {},
        dataset: {
          source: this.data,
        },
        xAxis: { type: "category" },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },

        series: [
          { type: "bar", name: "在售房源", barWidth: 44 },
          { type: "bar", name: "已售房源", barWidth: 44 },
        ],
      };
      chart.setOption(options);
    },
  },
  watch: {
    data: {
      deep: true,
      handler: function () {
        this.createChart();
      },
    },
  },
};
</script>
<style scoped>
.chart-container {
  /* width: 300px; */
  height: 300px;
  width: 100%;
}
</style>
