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

<template>

  <div ref="distion" style="width: 100%; height: 100%"></div>
</template>
<script>
import * as echarts from "echarts";

export default {
  props: {
    // className: {
    //   type: String,
    //   default: "chart",
    // },
    // width: {
    //   type: String,
    //   default: "100%",
    // },
    // height: {
    //   type: String,
    //   default: "400px",
    // },
    // perData: {
    //   type: Array,
    //   default: () => [
    //     {
    //       color: "#01ACFF",
    //       name: "摄像头",
    //       value: [39],
    //       // nAmount: 566557.14,
    //     },
    //   ],
    // },
  },
  data() {
    return {};
  },

  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },

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

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

      var pie = [
        {
          value: 50,
          name: "正常",
        },
        {
          value: 150,
          name: "故障",
        },
        {
          value: 100,
          name: "离线",
        },
        {
          value: 100,
          name: "预警",
        },
        {
          value: 100,
          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,
                formatter: " {b}：{c} ",
              },
              emphasis: {
                show: true,
              },
            },
            name: "访问来源",
            radius: ["45%", "67%"],
            type: "pie", 
            data: pie,
          },
        ],
        color: ["#0DFE95", "#F7B61C", "#2BCCFF", "#FE5C0D", "#4388F9"],
      };

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