suzhouyingjiPC/src/views/yingji/echarts/finishRate.vue

<template>
  <div style="height: 100%; height: 100%" v-loading="loadS">
    <div id="cakeBox"></div>
  </div>
</template>
<script>
import { workStatistics } from "@/api/yingji/keyEnterprise.js";
import * as echarts from "echarts";
export default {
  data() {
    return {
      arr1: [],
      arr2: [],
      //总数
      numTotal: 0,
    };
  },
  mounted() {},
  props: {
    loadS: {
      type: Boolean,
      default: true,
    },
  },
  methods: {
    getData(e) {
      this.arr1 = [];
      this.arr2 = [];
      e.forEach((value1) => {
        if (value1.institutionName != "苏州市") {
          this.arr1.push({
            value: value1.checkEnterpriseCount,
            name: value1.institutionName,
            pt: value1.pt,
          });
        } else {
          this.arr2.push({
            value: value1.plannedEnterpriseCount,
            name: value1.institutionName,
            pt: value1.pt == "NaN" ? 0 : value1.pt.toFixed(2),
          });
        }
      });
      this.initChart();
    },
    initChart() {
      var chartDom = document.getElementById("cakeBox");
      var myChart = echarts.init(chartDom);
      // 渲染
      var option = {
        color: [
          "#00A2FF",
          "#FDCA5B",
          "#48E1BB",
          "#FDAB5B",
          "#53D170",
          "#FE7A8C",
          "#D0EF52",
          "#EE70F6",
          "#F4F124",
          "#9571FE",
        ],
        title: {
          show: true,
          text: "各区域完成率",
          textStyle: {
            color: "#3D434D",
            fontSize: 16,
          },
          left: 34,
          top: 20,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          width: "45%",
          top: "25%",
          right: "10%",
          orient: "horizontal",
          itemGap: 25,
          itemWidth: 10,
          itemHeight: 10,
          icon: "circle",
          textStyle: {
            rich: {
              a: {
                color: "#525966",
                width: 40,
                padding: [0, 10, 0, 5],
              },
              b: {
                color: "#495B7D",
                fontWeight: "bold",
                padding: [0, 0, 0, 10],
              },
            },
          },
          formatter: function (name) {
            const item = option.legend.data.find((item) => item.name === name);
            // return `{a|${name}}{b|${( item.value / arrA * 100)}%}`;
            return `{a|${name}}{b|${item.pt * 100}%}`;
          },
          //将waiyuan的数据拿过来,就会只显示该外圆的数据
          // data: [
          //   { value: 15, name: "张家港市" },
          //   { value: 10, name: "吴中区" },
          //   { value: 8, name: "常熟市" },
          //   { value: 10, name: "姑苏区" },
          //   { value: 18, name: "太仓市" },
          //   { value: 6, name: "相城区" },
          //   { value: 10, name: "昆山市" },
          //   { value: 4, name: "工业园区" },
          //   { value: 10, name: "吴江区" },
          //   { value: 5, name: "高新区" },
          // ],
          data: this.arr1,
        },
        series: [
          {
            //内圆
            color: ["#F6F6F9"],
            type: "pie",
            center: ["28%", "55%"], // 饼图的中心位置
            radius: "32%",
            avoidLabelOverlap: false,
            tooltip: {
              show: false,
            },
            legend: {
              show: false,
            },
            //取消鼠标滑过高亮
            emphasis: {
              disabled: true,
            },
            label: {
              normal: {
                position: "center",
                formatter: function (params) {
                  console.log(params);
                  return `{a|${(Number(params.data.pt) * 100).toFixed(
                    2
                  )}%}\n{b|${params.data.name}完成率}`;
                },
                rich: {
                  a: {
                    color: "#114A99",
                    fontWeight: "bold",
                    fontSize: 24,
                    padding: [0, 0, 5, 0],
                  },
                  b: {
                    color: "#3D434D",
                    fontSize: 12,
                  },
                },
              },
            },
            labelLine: {
              show: false,
            },
            // data: [{ value: 1, name: "苏州完成率", pt: 100 }],
            data: this.arr2,
          },
          {
            //外圆
            type: "pie",
            center: ["28%", "55%"], // 饼图的中心位置
            radius: ["42%", "65%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
            },
            emphasis: {
              //取消高亮显示大字
              //   label: {
              //     show: true,
              //     fontSize: 40,
              //     fontWeight: "bold",
              //   },
            },
            labelLine: {
              show: false,
            },
            // data: [
            //   { value: 15, name: "张家港市" },
            //   { value: 10, name: "吴中区" },
            //   { value: 8, name: "常熟市" },
            //   { value: 10, name: "姑苏区" },
            //   { value: 18, name: "太仓市" },
            //   { value: 6, name: "相城区" },
            //   { value: 10, name: "昆山市" },
            //   { value: 4, name: "工业园区" },
            //   { value: 10, name: "吴江区" },
            //   { value: 5, name: "高新区" },
            // ],
            data: this.arr1,
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>
<style lang="scss" scoped>
#cakeBox {
  height: 100%;
  width: 100%;
}
</style>