v-charts

 optionpie_top: {
        title: {
          x: "50%",
          y: "45%",
          textAlign: "center",
          top: "75%", //字体的位置
          text: "当日能源利用率",
          textStyle: {
            fontWeight: "normal",
            color: "black",
            fontSize: 16
          },
          subtextStyle: {
            //副标题的文字的样式
            fontWeight: "bold",
            fontSize: 18,
            color: "#3ea1ff"
          }
        },
        series: [
          {
            name: " ",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            startAngle: 225,
            color: ["#7EB8FF", "transparent"],
            hoverAnimation: false,
            legendHoverLink: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 75,
                name: "1"
              },
              {
                value: 25,
                name: "2"
              }
            ]
          },
          {
            name: "",
            type: "pie",
            radius: ["52%", "68%"],
            avoidLabelOverlap: false,
            startAngle: 317,
            color: ["#fff", "transparent"],
            hoverAnimation: false,
            legendHoverLink: false,
            clockwise: false,
            itemStyle: {
              normal: {
                borderColor: "transparent",
                borderWidth: "20"
              },
              emphasis: {
                borderColor: "transparent",
                borderWidth: "20"
              }
            },
            z: 10,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: ((100 - percent) * 270) / 360,

                label: {
                  normal: {
                    formatter: percent + "%",
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "20",
                      fontWeight: "normal",
                      color: "black"
                    }
                  }
                },
                name: ""
              },
              {
                value: 1,
                name: ""
              },
              {
                value: 100 - ((100 - percent) * 270) / 360,
                name: ""
              }
            ]
          }
        ]
      },
      optionpie_center: {
        title: {
          x: "50%",
          y: "45%",
          textAlign: "center",
          top: "75%", //字体的位置
          text: "当月能源利用率",
          textStyle: {
            fontWeight: "normal",
            color: "black",
            fontSize: 16
          },
          subtextStyle: {
            //副标题的文字的样式
            fontWeight: "bold",
            fontSize: 18,
            color: "#3ea1ff"
          }
        },
        series: [
          {
            name: " ",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            startAngle: 225,
            color: ["#38D2BC", "transparent"],
            hoverAnimation: false,
            legendHoverLink: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 75,
                name: "1"
              },
              {
                value: 25,
                name: "2"
              }
            ]
          },
          {
            name: "",
            type: "pie",
            radius: ["52%", "68%"],
            avoidLabelOverlap: false,
            startAngle: 317,
            color: ["#fff", "transparent"],
            hoverAnimation: false,
            legendHoverLink: false,
            clockwise: false,
            itemStyle: {
              normal: {
                borderColor: "transparent",
                borderWidth: "20"
              },
              emphasis: {
                borderColor: "transparent",
                borderWidth: "20"
              }
            },
            z: 10,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: ((100 - percent_M) * 270) / 360,

                label: {
                  normal: {
                    formatter: percent_M + "%",
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "20",
                      fontWeight: "normal",
                      color: "black"
                    }
                  }
                },
                name: ""
              },
              {
                value: 1,
                name: ""
              },
              {
                value: 100 - ((100 - percent_M) * 270) / 360,
                name: ""
              }
            ]
          }
        ]
      },
      optionpie_bottom: {
        title: {
          x: "50%",
          y: "45%",
          textAlign: "center",
          top: "75%", //字体的位置
          text: "当年能源利用率",
          textStyle: {
            fontWeight: "normal",
            color: "black",
            fontSize: 16
          },
          subtextStyle: {
            //副标题的文字的样式
            fontWeight: "bold",
            fontSize: 18,
            color: "#3ea1ff"
          }
        },
        series: [
          {
            name: " ",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            startAngle: 225,
            color: ["#F091B4", "transparent"],
            hoverAnimation: false,
            legendHoverLink: false,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 75,
                name: "1"
              },
              {
                value: 25,
                name: "2"
              }
            ]
          },
          {
            name: "",
            type: "pie",
            radius: ["52%", "68%"],
            avoidLabelOverlap: false,
            startAngle: 317,
            color: ["#fff", "transparent"],
            hoverAnimation: false,
            legendHoverLink: false,
            clockwise: false,
            itemStyle: {
              normal: {
                borderColor: "transparent",
                borderWidth: "20"
              },
              emphasis: {
                borderColor: "transparent",
                borderWidth: "20"
              }
            },
            z: 10,
            label: {
              normal: {
                show: false,
                position: "center"
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: ((100 - percent_Y) * 270) / 360,

                label: {
                  normal: {
                    formatter: percent_Y + "%",
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "20",
                      fontWeight: "normal",
                      color: "black"
                    }
                  }
                },
                name: ""
              },
              {
                value: 1,
                name: ""
              },
              {
                value: 100 - ((100 - percent_Y) * 270) / 360,
                name: ""
              }
            ]
          }
        ]
      },