ims-gyee/src/components/chart/pie/pie-station-top5.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: "pie-chart",
  componentName: "pie-chart",
  props: {
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "13.889vh",
    },
    // 传入数据
    list: {
      type: Array,
      default: () => [{ value: 0, name: "" }],
    },

    // 颜色
    color: {
      type: Array,
      default: () => [
        // "#005bd9",
        // "#019f2e",
        // "#db6200",
        // "#a10f0f",
        // "#850894",
        // "#9fa0a2",
        "#005bd9",
        "#019f2e",
        "#db6200",
        "#d24645",
        "#f00bd8",
        "#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,
    },
  },
  computed: {},
  methods: {
    resize() {},
    initChart() {
      const chart = echarts.init(this.$el);
      let max =
        Math.max.apply(
          Math,
          this.list.map(function (o) {
            return o.value;
          })
        ) || 0;
      let index = this.list.findIndex((item) => item.value == max);
      let total =
        this.list.reduce((a, b) => {
          return a + b.value * 1;
        }, 0) || 0;
      let title = this.list.find((item) => item.value == max)?.name || "";

      let option = {
        color: this.color,
        legend: {
          top: 40,
          right: 0,
          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.list,
          },
          {
            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.list,
          },
        ],
      };

      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(() => {
      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>