自定义仪表盘echarts 项目数' }], pointer: { // 仪表盘指针 show: true, }, itemStyle: { color: "rgba(255,255,255,0)", borderColor: "#f3f5f6", borderWidth: "4", borderType: "solid" }, axisTick: { // 刻度 show: false }, splitLine: { // 分割线 show: false }, axisLabel: { // 刻度标签 show: false }, detail: { // 仪表盘详情 show: true, formatter: function(value) { return value + '%' }, offsetCenter: ['0%配置项内容和展示

            var colorLeft = '#00FCF7';
      var colorRight = '#5098ed';
      var colorLeftAlpha = ['#00FCF788', '#00FCF70c'];
      var colorRightAlpha = ['#5098ed88', '#5098ed08'];
      var value = 62
      var data = {
          value: value,
          percent: (value / 100).toFixed(2)
      };

 
      // 指定图表的配置项和数据
      var option = {
          backgroundColor: '#040d2e',
          series: [
              // 外侧灰色轴线
              {
                  type: "gauge",
                  radius: "98%", // 位置
                  center: ["50%", "70%"],
                  min: 0,
                  max: 100,
                  startAngle: 180,
                  endAngle: 0,
                  axisLine: {
                      show: true,
                      lineStyle: {
                          // 轴线样式
                          width: 4, // 宽度
                          color: [
                              [1, "rgba(229,229,229,0.3)"]
                          ] // 颜色
                      }
                  },
                  axisTick: {
                      // 刻度
                      show: false
                  },
                  splitLine: {
                      // 分割线
                      show: false
                  },
                  axisLabel: {
                      // 刻度标签
                      show: false
                  },
                  pointer: {
                      // 仪表盘指针
                      show: false
                  },
                  detail: {
                      // 仪表盘详情
                      show: false
                  }
              },
              // 内侧刻度
            //   {
            //       type: "gauge",
            //       radius: "85%", // 位置
            //       center: ["50%", "70%"],
            //       min: 0,
            //       max: 100,
            //       startAngle: 180,
            //       endAngle: 0,
            //       axisLine: {
            //           show: true,
            //           lineStyle: {
            //               // 轴线样式
            //               width: 120, // 宽度
            //               color: [
            //                   [
            //                       data.percent,
            //                       new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                               offset: 0,
            //                               color: colorLeftAlpha[0]
            //                           },
            //                           {
            //                               offset: 1,
            //                               color: colorLeftAlpha[1]
            //                           }
            //                       ])
            //                       // new echarts.graphic.RadialGradient(.5, 1, 2, [
            //                       //   {
            //                       //     offset: 1,
            //                       //     color: "rgba(80, 152, 237,0.9)"
            //                       //   },
            //                       //   {
            //                       //     offset: 0.6,
            //                       //     color: "rgba(80, 152, 237,0.7)"
            //                       //   },
            //                       //   {
            //                       //     offset: 0.4,
            //                       //     color: "rgba(80, 152, 237,0.1)"
            //                       //   },
            //                       //   {
            //                       //     offset: 0,
            //                       //     color: "rgba(80, 152, 237,0.01)"
            //                       //   }
            //                       // ])
            //                   ],
            //                   [
            //                       1,
            //                       new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            //                               offset: 0,
            //                               color: colorRightAlpha[0]
            //                           },
            //                           {
            //                               offset: 1,
            //                               color: colorRightAlpha[1]
            //                           }
            //                       ])
            //                   ]
            //               ] // 颜色
            //           }
            //       },
            //       axisTick: {
            //           // 刻度
            //           show: true,
            //           splitNumber: 2,
            //           length: 10
            //       },
            //       splitLine: {
            //           // 分割线
            //           show: false
            //       },
            //       axisLabel: {
            //           // 刻度标签
            //           show: false
            //       },
            //       pointer: {
            //           // 仪表盘指针
            //           show: false
            //       },
            //       detail: {
            //           // 仪表盘详情
            //           show: false
            //       }
            //   },
              // 中间白色半圆
              {
                  type: "gauge",
                  radius: "40%", // 位置
                  center: ["50%", "70%"],
                  min: 0,
                  max: 100,
                  startAngle: 180,
                  endAngle: 0,
                  axisLine: {
                      show: true,
                      lineStyle: {
                          // 轴线样式
                          width: 120, // 宽度
                          color: [
                              [
                                  1,
                                  new echarts.graphic.RadialGradient(.5, 1, 1, [{
                                          offset: 1,
                                          color: "rgba(229, 229, 229,0.15)"
                                      },
                                    //   {
                                    //       offset: 0.72,
                                    //       color: "rgba(229, 229, 229,0.05)"
                                    //   },
                                    //   {
                                    //       offset: 0.7,
                                    //       color: "rgba(229, 229, 229,0.4)"
                                    //   },
                                    //   {
                                    //       offset: 0.401,
                                    //       color: "rgba(229, 229, 229,0.05)"
                                    //   },
                                      {
                                          offset: 0.4,
                                          color: "rgba(229, 229, 229,0.8)"
                                      },
                                      {
                                          offset: 0,
                                          color: "rgba(229, 229, 229,0.8)"
                                      }
                                  ])
                              ]
                          ], // 颜色
                      }
                  },
                  axisTick: {
                      // 刻度
                      show: false
                  },
                  splitLine: {
                      // 分割线
                      show: false
                  },
                  axisLabel: {
                      // 刻度标签
                      show: false
                  },
                  pointer: {
                      // 仪表盘指针
                      show: false
                  },
                  detail: {
                      // 仪表盘详情
                      show: false
                  }
              },
              // 内侧轴线
              {
                  type: "gauge",
                  radius: "90%", // 位置
                  center: ["50%", "70%"],
                  min: 0,
                  max: 100,
                  startAngle: 180,
                  endAngle: 0,
                  axisLine: {
                      show: true,
                      lineStyle: {
                          // 轴线样式
                          width: 20, // 宽度
                          color: [
                              [data.percent, colorLeft],
                              [1, colorRight]
                          ], // 颜色

                      }
                  },
                  pointer: {
                      // 仪表盘指针
                      show: false,
                  },
                  axisTick: {
                      // 刻度
                      show: false
                  },
                  splitLine: {
                      // 分割线
                      show: false
                  },
                  axisLabel: {
                      // 刻度标签
                      show: false
                  },
                  detail: {
                      // 仪表盘详情
                      show: false
                  }
              },
              // 指针
              {
                  type: "gauge",
                  radius: "80%", // 位置
                  center: ["50%", "70%"],
                  min: 0,
                  max: 100,
                  startAngle: 180,
                  endAngle: 0,
                  axisLine: {
                      show: false,
                  },
                  data: [{
                      value: data.value,
                      name: '项目数'
                  }],
                  pointer: {
                      // 仪表盘指针
                      show: true,
                  },
                  itemStyle: {
                      color: "rgba(255,255,255,0)",
                      borderColor: "#f3f5f6",
                      borderWidth: "4",
                      borderType: "solid"
                  },
                  axisTick: {
                      // 刻度
                      show: false
                  },
                  splitLine: {
                      // 分割线
                      show: false
                  },
                  axisLabel: {
                      // 刻度标签
                      show: false
                  },
                  detail: {
                      // 仪表盘详情
                      show: true,
                      formatter: function(value) {
                          return value + '%'
                      },
                      offsetCenter: ['0%', '-15%'],
                    //   fontSize: '18px',
                    //   color: '#08b5d6'
                  },
                  title: {
                      show: true,
                      offsetCenter: [0, '50%'],
                      color: '#08b5d6'
                  }
              },
          ]
      };