PC_FiveFollowing/src/views/site/components/Overview/pieChart.vue

<template>
  <div ref="pieChart" :style="{ height: height, width: width }"></div>
</template>
<script>
import * as echarts from "echarts";
import api from "../../../../api/Overview/index";
import { ElMessage } from "element-plus";
export default {
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
  },
  data() {
    return {};
  },
  mounted() {},
  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },
  watch: {
    /**
     * @监听vuex存储值变化 用于调用api
     */
    "$store.state.siteId": {
      immediate: true, // 首次加载的时候执行函数
      deep: true, // 深入观察,监听数组值，对象属性值的变化
      handler: function () {
        this.count();
      },
    },
  },
  methods: {
    count() {
      var _this = this;
      api
        .count({
          siteId: _this.$store.state.siteId,
        })
        .then((requset) => {
          if (requset.status === "SUCCESS") {
            var data = requset.data;
            // console.log(data);
            _this.initChart(data);
          } else {
            ElMessage.success({
              message: requset.msg,
              type: "success",
            });
          }
        });
    },
    //次数分布折线图
    initChart(list) {
      var chart = echarts.init(this.$refs.pieChart);
      var option;

      var pie = [];
      var totalNum = 0;
      list.map((val) => {
        totalNum += val.count;
        pie.push({ value: val.count, name: val.name });
        return;
      });

      option = {
        grid: {},
        title: [
          {
            text: "{name|" + totalNum + "}\n{val|总数}",
            top: "center",
            left: "center",
            textStyle: {
              rich: {
                name: {
                  fontSize: 30,
                  fontWeight: "normal",
                  color: "#FFFFFF",
                  fontFamily: "impact",
                  padding: [0, 0, 3, 0],
                },
                val: {
                  fontSize: 14,
                  fontWeight: "normal",
                  color: "#FFFFFF",
                  padding: [3, 0, 0, 0],
                },
              },
            },
          },
        ],
        tooltip: {
          // trigger: "item",
          trigger: "item",
          confine: true, //将此限制打开后tooltip将不再溢出
          formatter: function (params) {
            return (
              params.name +
              "：" +
              params.value +
              "<br>占比：" +
              params.percent.toFixed(2) +
              "%"
            );
          },
        },

        series: [
          {
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
                formatter: " {b} ",
              },
              emphasis: {
                show: true,
              },
            },
            radius: ["43%", "60%"],
            type: "pie",
            data: pie,
            labelLine: {
              normal: {
                length: 3, //aa折线长度
                // length2: 1, //aa折线长度
              },
            },
          },
        ],
        color: ["#39BBFE", "#FCCB35", "#FC7735"],
      };

      chart.setOption(option, true);
      window.addEventListener("resize", () => {
        chart.resize();
      });
      this.chart = chart;
    },
  },
};
</script>