PC_FiveFollowing/src/views/home/components/pieChart.vue

<template>
  <div ref="pieChart" style="width: 100%; height: 100%;padding-top:.375rem"></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: ["fdeviceTypeCount"],
  data() {
    return {
      deviceTypeCount: this.fdeviceTypeCount,
    };
  },

  mounted() {
    this.$nextTick(() => {
      // console.log("子组件中");
      // console.log(this.deviceTypeCount);
      // console.log(this.deviceTypeCount.normalCount);
      this.initChart();
    });
  },

  beforeUnmount() {
    window.removeEventListener("resize", this.chart);
  },

  methods: {
    //次数分布折线图
    initChart() {
      // console.log(this.fdeviceTypeCount)
      var chart = echarts.init(this.$refs.pieChart);
      var option;

      var pie = [
        {
          value: this.deviceTypeCount.normalCount,
          name: "正常",
        },
        {
          value:this.deviceTypeCount.faultCount,
          name: "故障",
        },
        {
          value:this.deviceTypeCount.offLineCount,
          name: "离线",
        },
        {
          value: this.deviceTypeCount.deviceCount,
          name: "预警",
        },
      ];
      var totalNum = 0;
      pie.forEach(function (value) {
        totalNum += value.value;
      });

      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",
          formatter: function (params) {
            return (
              params.name +
              "：" +
              params.value +
              "<br>占比：" +
              params.percent.toFixed(2) +
              "%"
            );
          },
        },
        // itemStyle:{
        //     normal: {
        //          label: {
        //              show: true,
        //         position: 'outside',
        //              color: 'green',
        //          }
        //     }
        // },

        series: [
          {
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                },
                formatter: " {b}：{c} ",
              },
              emphasis: {
                show: true,
              },
            },
            name: "访问来源",
            radius: ["45%", "67%"],
            type: "pie",
            data: pie,
          },
        ],
        color: ["#0DFE95", "#F7B61C", "#2BCCFF", "#FE5C0D", "#4388F9"],
      };

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