cesium_three/src/components/windNeedCharts/pieChart.vue

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

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

export default {
  name: "double-line-chart",
  componentName: "double-line-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",
        "#a10f0f",
        "#850894",
        "#9fa0a2",
      ],
    },
  },
  data() {
    return {
      id: "",
      chart: null,
      newlist: null,
    };
  },
  watch: {
    list: {
      handler(newValue, oldValue) {
        this.newlist = newValue;
        this.$nextTick(() => {
          this.newlist = this.list;
          this.initChart();
        });
      },
      deep: true,
    },
    "$store.state.themeName"() {
      this.initChart();
    },
  },
  methods: {
    resize() {},
    initChart() {
      const chart = echarts.init(this.$el);
      let that = this;
      let option = {
        color: this.color,
        legend: {
          type: "scroll",
          top: 20,
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            color: "#fff",
            fontSize: 12,
          },
        //   formatter(params) {
        //     switch (params) {
        //       case "实发电量":
        //         return (
        //           params +
        //           "       " +
        //           (that.lossPower?.SFDL
        //             ? that.lossPower?.SFDL?.toFixed(2)
        //             : "0")
        //         );
        //       case "故障损失":
        //         return (
        //           params +
        //           "       " +
        //           (that.lossPower?.GZSS
        //             ? that.lossPower?.GZSS?.toFixed(2)
        //             : "0")
        //         );
        //       case "检修损失":
        //         return (
        //           params +
        //           "       " +
        //           (that.lossPower?.WHSS
        //             ? that.lossPower?.WHSS?.toFixed(2)
        //             : "0")
        //         );
        //       case "受累损失":
        //         return (
        //           params +
        //           "       " +
        //           (that.lossPower?.SLSS
        //             ? that.lossPower?.SLSS?.toFixed(2)
        //             : "0")
        //         );
        //       case "限电损失":
        //         return (
        //           params +
        //           "       " +
        //           (that.lossPower?.XDSS
        //             ? that.lossPower?.XDSS?.toFixed(2)
        //             : "0")
        //         );
        //       case "性能损失":
        //         return (
        //           params +
        //           "       " +
        //           (that.lossPower?.XNSS
        //             ? that.lossPower?.XNSS?.toFixed(2)
        //             : "0")
        //         );
        //     }
        //   },
        },
        tooltip: {
          trigger: "item",
          formatter(params) {
            return `${params?.marker} ${
              params?.name
            } ${params?.data?.realVal?.toFixed(2)}`;
          },
        },
        radar: [
          {
            indicator: [{ text: "" }],
            center: ["50%", "60%"],
            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,
              },
            },
          },
        ],
        series: [
          {
            name: "",
            type: "pie",
            radius: [0, 80],
            center: ["50%", "60%"],
            roseType: "area",
            label: {
              normal: {
                color: "#fff",
                formatter: "{d}%",
              },
            },
            data: [
              {
                value: this.lossPower.SFDL
                  ? this.lossPower?.SFDL / this.lossPower?.SUM
                  : 0,
                name: "实发电量",
                realVal: this.lossPower?.SFDL,
              },
              {
                value: this.lossPower.XNSS
                  ? this.lossPower?.XNSS / this.lossPower?.SUM
                  : 0,
                name: "性能损失",
                realVal: this.lossPower?.XNSS,
              },
              {
                value: this.lossPower.WHSS
                  ? this.lossPower?.WHSS / this.lossPower?.SUM
                  : 0,
                name: "检修损失",
                realVal: this.lossPower?.WHSS,
              },
              {
                value: this.lossPower.GZSS
                  ? this.lossPower?.GZSS / this.lossPower?.SUM
                  : 0,
                name: "故障损失",
                realVal: this.lossPower?.GZSS,
              },
              {
                value: this.lossPower.XDSS
                  ? this.lossPower?.XDSS / this.lossPower?.SUM
                  : 0,
                name: "限电损失",
                realVal: this.lossPower?.XDSS,
              },
              {
                value: this.lossPower.SLSS
                  ? this.lossPower?.SLSS / this.lossPower?.SUM
                  : 0,
                name: "受累损失",
                realVal: this.lossPower?.SLSS,
              },
            ],
          },
        ],
      };
      chart.clear();
      chart.setOption(option);

      this.resize = function () {
        chart.resize();
      };

      window.addEventListener("resize", this.resize);
    },
  },
  created() {
    this.$nextTick(() => {
      this.id = "pie-chart-" + util.newGUID();
    });
    this.newlist = this.list;
  },
  mounted() {
    this.$nextTick(() => {
      this.$el.style.width = this.width;
      this.$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>