echars百分比饼图

`

1

import * as echarts from "echarts"; // 百分比饼图 getBar() { let chartDom = document.getElementById("bing1"); let myChart = echarts.init(chartDom); let data = { name: "CPU使用率", value: [68.43], nAmount: 2566557.14 }; // 0色 1色 title色 最外边框 const color = ["#53D5FF", "#2194EF", "#30CBFF", "#1076A0", "#0F6D98"];

  let option = {
    backgroundColor: "rgba(0, 0, 0, 0)",
    title: {
      text: data.value[0] + "%",
      textStyle: {
        color: color[2],
        fontSize: 14,
        fontFamily: 'Arial-BoldMT'
      },
      itemGap: 20,
      left: "center",
      top: "center"
    },
    // 悬浮框
    tooltip: {
      formatter: function(params) {
        return (
          '<span style="color: #fff;">占11比：' + params.value + "%</span>"
        );
      }
    },
    // 极坐标系的角度轴
    angleAxis: {
      max: 100,
      clockwise: true, // 逆时针
      // 隐藏刻度线
      show: false
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    // 最内层圆环大小
    polar: [
      {
        center: ["50%", "50%"], //中心点位置
        radius: "162%" //图形大小
      }
    ],
    series: [
      // 最中间样式
      {
        name: "吃猪肉频率",
        type: "pie",
        radius: ["88%", "68%"],
        silent: true,
        clockwise: true,
        startAngle: 90,
        z: 0,
        zlevel: 0,
        label: {
          normal: {
            position: "center"
          }
        },
        data: [
          {
            value: data.value,
            name: "",
            itemStyle: {
              normal: {
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: "#53D5FF" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#2194EF" // 100% 处的颜色
                    }
                  ]
                }
              }
            }
          },
          {
            value: 100 - data.value,
            name: "",
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)"
              }
            }
          }
        ]
      },

      // 第二层圆样式
      {
        type: "pie",
        name: "内层细圆环",
        radius: ["85%", "88%"],
        hoverAnimation: false,
        clockWise: true,
        itemStyle: {
          normal: {
            shadowBlur: 52,
            shadowOffsetX: 5,
            shadowColor: "#53D5FF",
            color: color[4]
          }
        },
        tooltip: {
          show: false
        },
        label: {
          show: false
        },
        data: [100]
      },
      // 第三层圆样式
      {
        type: "pie",
        name: "第三层圆样式",
        radius: ["97%", "100%"],
        hoverAnimation: false,
        clockWise: true,
        itemStyle: {
          normal: {
            color: color[3]
          }
        },
        tooltip: {
          show: false
        },
        label: {
          show: false
        },
        data: [100]
      },
      //刻度
      {
        name: "",
        type: "gauge",
        radius: "90%",
        center: ["50%", "50%"],
        startAngle: 0,
        endAngle: 359.9,
        splitNumber: 15,
        hoverAnimation: true,
        axisTick: {
          show: false
        },
        splitLine: {
          length: 50,
          lineStyle: {
             1,
            color: "#0D264A"
          }
        },
        axisLabel: {
          show: false
        },
        pointer: {
          show: false
        },
        axisLine: {
          lineStyle: {
            opacity: 0
          }
        },
        detail: {
          show: false
        },
        data: [
          {
            value: 0,
            name: ""
          }
        ]
      }
    ]
  };
  option && myChart.setOption(option);
}`