饼图、仪表盘echarts 配置项内容和展示

      var percent = 80; //百分数
     option = {
         backgroundColor:"#081322",
        tooltip: {
          show: false,
          formatter: "{a} <br/>{b} : {c}%",
        },
        title: [
          {
            text: "上课学生",
            y: "60%",
            x: "center",
            textStyle: {
              fontSize: 36,
              fontFamily: "yueyuan",
              color: "#b3defc",
            },
          },
          
        ],
        series: [
          {
            name: "最外部进度条",
            type: "gauge",
            radius: "100%",
            center: ["center", "center"], // 仪表位置
            splitNumber: 100,
            axisLine: {
              lineStyle: {
                color: [
                  [
                    100,
                    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                      {
                        offset: 0,
                        color: "rgba(145,207,255,0)",
                      },
                      {
                        offset: 0.5,
                        color: "rgba(70, 155 ,240,0.2)",
                      },
                      {
                        offset: 1,
                        color: "rgba(70, 155 ,240,0.8)",
                      },
                    ]),
                  ],
                  [1, "#f00"],
                ],
                width: 10,
              },
            },
            axisLabel: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            itemStyle: {
              show: false,
            },
            detail: {
              show: false,
            },
            pointer: {
              show: false,
            },
            animationDuration: 4000,
          },
          {
            name: "渐变数据环整个",
            type: "pie",
            radius: ["55%", "80%"],
            avoidLabelOverlap: false,
            startAngle: 210,
            color: [
              {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(66, 145, 226,0.9)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(66, 145, 226,0.3)", // 100% 处的颜色
                  },
                ],
              },
              "transparent",
            ],
            hoverAnimation: false, //是否开启 hover 在扇区上的放大动画效果。
            legendHoverLink: false, //是否启用图例 hover 时的联动高亮。
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 66,
                name: "1",
                itemStyle: {
                  borderWidth: 3,
                  borderColor: "#4C7FDB",
                },
              },
              {
                value: 34,
                name: "2",
                itemStyle: {
                  borderWidth: 0,
                  borderColor: "transparent",
                },
              },
            ],
          },
          {
            name: "内部渐变线 ",
            type: "pie",
            radius: ["44%", "46%"],
            avoidLabelOverlap: false, //是否启用防止标签重叠策略
            startAngle: -30,
            hoverAnimation: false,
            legendHoverLink: false,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: ["#4497EA"],
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: 30,
                name: "1",
                itemStyle: {
                  color: ["transparent"],
                },
              },
              {
                value: 60,
                name: "2",
              },
            ],
          },
          {
            name: "环形百分比",
            type: "pie",
            radius: ["55%", "80%"],
            avoidLabelOverlap: false,
            startAngle: -30,
            color: ["#091424", "transparent", "transparent"],
            hoverAnimation: false,
            legendHoverLink: false,
            clockwise: false, //饼图的扇区是否是顺时针排布。
            itemStyle: {
              show: false,
              normal: {
                borderColor: "transparent",
                borderWidth: "20",
              },
              emphasis: {
                borderColor: "transparent",
                borderWidth: "20",
              },
            },
            z: 10,
            label: {
              normal: {
                show: false,
                position: "center",
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                value: ((100 - percent) * 240) / 360,
                label: {
                  normal: {
                    formatter: percent + "%",
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: "60",
                      fontWeight: "normal",
                      color: "#b3defc",
                    },
                  },
                },
                name: "",
              },
              {
                value: 1,
                name: "",
              },
              {
                value: 100 - ((100 - percent) * 270) / 360,
                name: "",
              },
            ],
          },
          {
            // 底部
            name: "两端线",
            type: "pie",
            radius: ["55%", "80%"],
            startAngle: 210,
            endAngle: -40,
            labelLine: {
              show: false,
            },
            z: 15,
            silent: true,
            label: {
              show: false,
            },
            data: [
              {
                value: 3,
                itemStyle: {
                  color: "#4698EC",
                },
              },
              {
                value: 482,
                itemStyle: {
                  color: "transparent",
                },
              },
              {
                value: 3,
                itemStyle: {
                  color: "#4698EC",
                },
              },
              {
                value: 250,
                itemStyle: {
                  color: "transparent",
                },
              },
            ],
          },
        ],
      };