<template>
  <div class="chart" :id="id"></div>
</template>

<script>
export default {
  name: "pieChart",
  props: {
    id: String,
    params: Array,
  },
  watch: {
    params: {
      handler: function (val) {
        if (val.length) {
          this.initData();
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    setOption() {
      const that = this;
      let xData = this.params.map((item) => {
        return item.name;
      });
      const options = {
        // color: this.colors || ["#ff80db", "#c8cc00", "#67c6b5"],
        backgroundColor: "#f8f8f8",
        tooltip: {
          axisPointer: {
            type: "cross",
          },
          formatter: function (params) {
            return (
              params.marker +
              ` 占比：${params.data.value}% <br>数量：${params.data.count}`
            );
          },
        },
        xAxis: {
          type: "category",
          data: xData,
          axisLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: "#999",
            },
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          name:"活跃度占比",
          type: "value",
          nameTextStyle:{
            align:"right"
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 0.5,
              color: "#999",
            },
          },
          splitLine: {
            show: false,
          },
          max: 100,
          axisLabel: {
            show: true,
            interval: "auto",
            formatter: "{value}%",
          },
        },
        series: {
          data: this.params,
          colorBy: "data",
          type: "scatter",
          barMaxWidth: 40, //最大宽度
          barMinHeight: 0, // 最小高度
          symbolSize: function (data) {
            return Math.sqrt(data) * 8 > 10 ? Math.sqrt(data) * 8 : 10;
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: "rgba(25, 100, 150, 0.5)",
            shadowOffsetY: 5,
          },
          label: {
            show: true,
            position: "top",
            formatter: function (params) {
              return params.data.count ? params.data.count : "";
            },
          },
          selectedMode: true,
          hoverAnimation: true,
          avoidLabelOverlap: true,
          animationType: "scale",
          animationEasing: "elasticOut",
          animationDelay() {
            return Math.random() * 100;
          },
        },
        grid: {
          top: 40,
          right: "5%",
          bottom: 30,
          left: "10%",
        },
      };
      return options;
    },
    initData() {
      if (!this.chart) {
        const div = document.getElementById(this.id);
        this.chart = this.$echarts.init(div);
      }
      const options = this.setOption();
      this.chart?.clear();
      this.chart.setOption(options, true);
      this.chart.off("click");
      this.chart.on("click", "series", (params) => {
        this.$emit("clickScatterChart", params);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.chart {
  height: 100%;
}
</style>
