健康度仪表盘echarts rgba(248,182,45,1)配置项内容和展示

健康度仪表盘

        var datas = {
      value: 80,
      title: "健康度",
      type: 1,
      radiusType: 1
  };

  var fontColor = "#fff";
  var seriesName = "";
  let noramlSize = 16;
  let state = "";
  let center = ["50%", "70%"];
  let wqradius,
      nqradius,
      kdradius;

  wqradius = "100%";
  nqradius = "90%";
  kdradius = "95%";

  let wqColor = "rgba(80, 152, 237,0.9)";
  let nqColor = [
      [datas.value / 100, new echarts.graphic.LinearGradient(
                        0, 0, 1, 0, [{
                                offset: 0,
                                color: 'rgba(248,182,45,1)',
                            }, {
                                offset: 0.5,
                                color: 'rgba(125,103,179,1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(33,109,195,1)',
                            }
                        ]
                    )],
      [1, "#2C3638"]
  ]

  option = {
      backgroundColor:"#000",
      title: {
          show: true,
          x: "center",
          bottom: "6%",
          text: datas.title,
          textStyle: {
              fontWeight: "700",
              fontSize: 16,
              color: fontColor
          }
      },
      tooltip: {
          show: false
      },
      series: [{
              name: "刻度文字",
              type: "gauge",
              radius: kdradius,
              center: center,
              startAngle: 180,
              endAngle: 0,
              z: 7,
              splitNumber: 5,
              min: 0,
              max: 100,
              axisTick: {
                  show: true,
                  lineStyle: {
                      color: "#0af",
                      width: 1
                  },
                  length: 8,
                  splitNumber: 6
              },
              splitLine: {
                  show: false
              },
              axisLine: {
                  lineStyle: {
                      width: 25,
                      opacity: 0
                  }
              },
              axisLabel: {
                  distance: -70,
                  fontSize: noramlSize,
                  color: fontColor,
              },
/*              pointer: {
                  show: false
              },
              detail: {
                  show: false
              }*/
              pointer: {
                  show: true,
                  width: 10,
                  length: "60%"
              },
              itemStyle: {
                  normal: {
                      //color: "#0af",//wqColor
                      color:new echarts.graphic.LinearGradient(
                        0, 0, 1, 0, [{
                                offset: 0,
                                color: 'rgba(248,182,45,1)',
                            }, {
                                offset: 0.5,
                                color: 'rgba(125,103,179,1)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(33,109,195,1)',
                            }
                        ]
                    )
                  }
              },
              detail: {
                  show: true,
                  offsetCenter: [0, "30%"],//显示数值的位置
                  rich: {
                      value: {
                          fontSize: 25,
                          lineHeight: 10,
                          color: "#1e87f0",
                          fontWeight: "700"
                      },
                      company: {
                          fontSize: 16,
                          lineHeight: 20,
                          color: "#1e87f0"
                      }
                  }
              },
              data: [datas.value]
          },/*
          {
              name: "指针",
              type: "gauge",
              z: 9,
              radius: "70%",
              startAngle: 180,
              endAngle: 0,
              center: center,
              axisLine: {
                  lineStyle: {
                      width: 0
                  }
              },
              axisTick: {
                  show: false
              },
              splitLine: {
                  show: false
              },
              axisLabel: {
                  show: false
              },
              min: 0,
              max: 5,
              pointer: {
                  show: true,
                  width: 10,
                  length: "60%"
              },
              itemStyle: {
                  normal: {
                      color: "#0af",//wqColor
                  }
              },
              detail: {
                  show: true,
                  offsetCenter: [0, "40%"],
                  rich: {
                      value: {
                          fontSize: 25,
                          lineHeight: 10,
                          color: "#1e87f0",
                          fontWeight: "700"
                      },
                      company: {
                          fontSize: 16,
                          lineHeight: 20,
                          color: "#1e87f0"
                      }
                  }
              },
              data: [datas.value]
          },*/
          {
              name: "内层盘",
              type: "gauge",
              z: 6,
              radius: nqradius,
              startAngle: 180,
              endAngle: 0,
              center: center,
              axisLine: {
                  lineStyle: {
                      color: nqColor,
                      width: 25,
                      opacity: 0.9
                  }
              },
              splitNumber: 5,
              min: 0,
              max: 100,
              axisTick: {
                  show: false
              },

              axisLabel: {
                  show: true
              },
              pointer: {
                  show: false
              },

              detail: {
                  show: 0
              }
          }
      ]
  };