ims-gyee/src/components/chart/pie/pie-chart.vue

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

<script>
import util from "@/helper/util.js";
import partten from "@/helper/partten.js";
import * as echarts from "echarts";

export default {
  name: "pie-chart",
  componentName: "pie-chart",
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "13.889vh",
    },
    // 传入数据
    lossPower: {
      type: Object,
      default: () => {},
    },
    // 单位
    unit: {
      type: String,
      default: "",
    },
    //倍率
    ratio: {
      type: Number,
      default: 1,
    },
    showLegend: {
      type: Boolean,
      default: false,
    },
    // 颜色
    color: {
      type: Array,
      default: () => [
        "#005bd9",
        "#019f2e",
        "#db6200",
        "#d24645",
        "#f00bd8",
        "#9fa0a2",
      ],
    },
  },
  data() {
    return {
      id: "",
      chart: null,
      newlist: null,
      chooseItem: {},
      seriesData: [],
    };
  },
  watch: {
    lossPower() {
      this.seriesData = [
        {
          value: this.lossPower.XNSS ? this.lossPower?.XNSS?.toFixed(2) : 0,
          name: "性能损失",
        },
        {
          value: this.lossPower.WHSS ? this.lossPower?.WHSS?.toFixed(2) : 0,
          name: "维护损失",
        },
        {
          value: this.lossPower.GZSS ? this.lossPower?.GZSS?.toFixed(2) : 0,
          name: "故障损失",
        },
        {
          value: this.lossPower.XDSS ? this.lossPower?.XDSS?.toFixed(2) : 0,
          name: "限电损失",
        },
        {
          value: this.lossPower.SLSS ? this.lossPower?.SLSS?.toFixed(2) : 0,
          name: "受累损失",
        },
      ];
    },
  },

  methods: {
    resize() {},
    initChart() {
      const chart = echarts.init(document.getElementById("equipment"));
      let max =
        Math.max.apply(
          Math,
          this.seriesData.map(function (o) {
            return o.value;
          })
        ) || 0;
      let index = this.seriesData.findIndex((item) => item.value == max);
      let total =
        this.seriesData.reduce((a, b) => {
          return a + b.value * 1;
        }, 0) || 0;
      let title = this.seriesData.find((item) => item.value == max)?.name || "";

      let option = {
        color: this.color,

        // radar: [
        //   {
        //     indicator: [{ text: "" }],
        //     center: ["47%", "50%"],
        //     radius: [0, 79],
        //     startAngle: 60,
        //     splitNumber: 5,
        //     shape: "circle",
        //     name: {
        //       formatter: "",
        //       textStyle: {
        //         color: "#0000FF",
        //       },
        //     },
        //     splitArea: {
        //       areaStyle: {
        //         color: "rgba(0, 0, 0, 0)",
        //       },
        //     },
        //     axisLine: {
        //       lineStyle: {
        //         color: "rgba(0, 0, 0, 0)",
        //       },
        //     },
        //     splitLine: {
        //       lineStyle: {
        //         color: "#0a389c",
        //         shadowColor: "#0a389c",
        //         shadowBlur: 10,
        //       },
        //     },
        //   },
        // ],
        // tooltip: {
        //   trigger: "item",
        // },
        // series: [
        //   {
        //     name: "",
        //     type: "pie",
        //     radius: [0, 80],
        //     center: ["47%", "50%"],
        //     roseType: "area",
        //     label: {
        //       formatter: "{d}%",
        //       padding: [-20, -25, 10, 5],
        //     },
        //     itemStyle: {
        //       normal: {
        //         // 阴影的大小
        //         shadowBlur: 20,
        //         // 阴影水平方向上的偏移
        //         shadowOffsetX: 0,
        //         // 阴影垂直方向上的偏移
        //         shadowOffsetY: 0,
        //         // 阴影颜色
        //         shadowColor: "rgba(0,70,199, 0.8)",
        //       },
        //       borderRadius: 2,
        //     },
        //     data: [
        //       {
        //         value: this.lossPower.XNSS
        //           ? this.lossPower?.XNSS?.toFixed(2)
        //           : 0,
        //         name: "性能损失",
        //       },
        //       {
        //         value: this.lossPower.WHSS
        //           ? this.lossPower?.WHSS?.toFixed(2)
        //           : 0,
        //         name: "维护损失",
        //       },
        //       {
        //         value: this.lossPower.GZSS
        //           ? this.lossPower?.GZSS?.toFixed(2)
        //           : 0,
        //         name: "故障损失",
        //       },
        //       {
        //         value: this.lossPower.XDSS
        //           ? this.lossPower?.XDSS?.toFixed(2)
        //           : 0,
        //         name: "限电损失",
        //       },
        //       {
        //         value: this.lossPower.SLSS
        //           ? this.lossPower?.SLSS?.toFixed(2)
        //           : 0,
        //         name: "受累损失",
        //       },
        //     ],
        //   },
        // ],
        legend: {
          top: 40,
          right: 30,
          orient: "vertical", //改变排列方式
          itemGap: 15, // 设置legend的间距
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          textStyle: {
            fontSize: 15,
            color: "#fff",
          },
          itemStyle: {
            borderColor: "transparent",
          },
        },
        title: {
          text: `{val|${
            max && total ? Number((max / total) * 100).toFixed(2) : 0
          }%}\n{name|${title || ""}}`,
          top: "43%",
          left: "34%",
          textAlign: "center",
          textStyle: {
            rich: {
              name: {
                fontSize: 15,
                fontWeight: "bold",
                color: this.color[index],
              },
              val: {
                fontSize: 14,
                fontWeight: "bold",
                color: this.color[index],
              },
            },
          },
        },
        series: [
          {
            radius: ["60%", "65%"],
            center: ["35%", "50%"],
            type: "pie",
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              position: "center",
              normal: {
                fontSize: 14,
                fontWeight: "bold",
                show: true,
                padding: [-25, -40, 5, 1],
                formatter: (params) => {
                  return `${params.name}${params.percent}%`;
                },
              },
            },

            labelLine: {
              lineStyle: {
                width: 1,
              },
            },
            itemStyle: {
              borderColor: "#000",
            },
            data: this.seriesData,
          },
          {
            name: "",
            type: "pie",
            radius: ["30%", "60%"],
            center: ["35%", "50%"],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            itemStyle: {
              opacity: 0.8,
              color: "#35383f",
              borderColor: "#000",
            },
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: this.seriesData,
          },
        ],
      };

      chart.clear();

      chart.setOption(option);
      chart.on("mouseover", (event) => {
        let name = event.name;
        let value = event.percent;
        option.title.text = "{val|" + value + "%}\n{name|" + name + "}";
        option.animation = false;
        option.title.textStyle = {
          rich: {
            name: {
              fontSize: 15,
              fontWeight: "bold",
              color: this.color[event.dataIndex],
            },
            val: {
              fontSize: 14,
              fontWeight: "bold",
              color: this.color[event.dataIndex],
            },
          },
        };
        chart.setOption(option);
      });
      chart.on("mouseout", (event) => {
        option.animation = false;
        option.title = {
          text: `{val|${
            max && total ? Number((max / total) * 100).toFixed(2) : 0
          }%}\n{name|${title || ""}}`,
          top: "43%",
          left: "34%",
          textAlign: "center",
          textStyle: {
            rich: {
              name: {
                fontSize: 15,
                fontWeight: "bold",
                color: this.color[index],
                // padding: [10, 10],
              },
              val: {
                fontSize: 14,
                fontWeight: "bold",
                color: this.color[index],
              },
            },
          },
        };
        chart.setOption(option);
      });
      this.resize = function () {
        chart.resize();
      };

      window.addEventListener("resize", this.resize);
    },
  },
  created() {
    this.$nextTick(() => {});
  },
  mounted() {
    this.$nextTick(() => {
      let el = this.$el.parentElement;
      el.style.width = this.width;
      el.style.height = this.height;
      this.initChart();
    });
  },
  updated() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  unmounted() {
    window.removeEventListener("resize", this.resize);
  },
};
</script>

<style lang="less">
.chart {
  width: 100%;
  height: 100%;
  display: inline-block;
}
</style>