PC_FiveFollowing/src/views/site/components/Overview/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: 12,
          name: "配电",
        },
        {
          value: 5,
          name: "箱变",
        },
        {
          value: 3,
          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",
         trigger: 'item',
         confine:true,//将此限制打开后tooltip将不再溢出
          formatter: function (params) {
            return (
              params.name +
              "：" +
              params.value +
              "<br>占比：" +
              params.percent.toFixed(2) +
              "%"
            );
          },
        },
  

        series: [
          {
            label: {
              position: "inside",//此处将展示的文字在内部展示
              normal: {
                show: true,
                formatter: " {b}:{c} ",
              },
              emphasis: {
                show: true,
              },
            },
            name: "访问来源",
            radius: ["43%", "65%"],
            type: "pie", 
            data: pie,
            labelLine: {
							normal: {
								length: 3, //aa折线长度
								// length2: 1, //aa折线长度

							}
						},
            // labelLine:{  
            //     normal:{  
            //         length:5  
            //     }  
            // }, 
          },
        ],
        color: ["#39BBFE", "#FCCB35", "#FC7735"],
      };

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