Echarts 仪表盘

 <EChart height="300px" :option="option1" />
     <div class="tipBox">
         <div>正常分数 <div style="color: #22b8bc">95 ~ 100分</div></div>
         <div>黄色预警分数<div style="color: #ffce64">90 ~ 95分</div></div>
         <div>正常分数<div style="color: #dd5851">0 ~ 90分</div></div>
     </div>

 getOption1() {
        const option = {
          title: {
            text: '{a| }',
            show: true,
            x: '46%',
            y: '33%',
            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 400,
              fontSize: 20,
              color: '#22B8BC',
              shadowBlur: 10,
              rich: {
                a: {
                  color: '#FFF', // 设置 动态数据字体的颜色
                  fontSize: '12', // 设置 动态数据字体的大小
                  height: 30,
                  width: 30,
                  backgroundColor: {
                    image: require('@/projects/3d-new/assets/err1.png')
                  }
                }
              }
            }
          },
          series: [
            {
              name: '1',
              type: 'gauge',
              center: ['50%', '55%'], // 默认全局居中
              radius: '88%',
              min: 0,
              max: 400,
              splitNumber: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: [15, 15, 0, 0]
                }
              },
              axisLine: { // 坐标轴线
                roundCap: true,
                lineStyle: { // 属性lineStyle控制线条样式
                  color: [
                    [
                      95.6 / 100,
                      new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                        {
                          offset: 0,
                          color: '#429FE6'
                        },
                        {
                          offset: 1,
                          color: '#22B8BC'
                        }
                      ])
                    ],
                    // [100 / 400, '#4F8BBF'], // 根据实际数据动态改变
                    [1, '#000']
                  ],
                  width: 25, // 半径
                  shadowColor: '#000',
                  shadowBlur: 1
                  // barBorderRadius: 10
                }
              },
              pointer: {
                show: false
              },
              axisLabel: {
                textStyle: { // 属性lineStyle控制线条样式
                  fontWeight: 'bolder',
                  color: 'transparent', // 刻度数字颜色 隐藏
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 10
                }
              },
              axisTick: { // 坐标轴小标记
                length: 12, // 属性length控制线长
                lineStyle: { // 属性lineStyle控制线条样式
                  color: 'transparent', // 坐标轴 小刻度线颜色
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 10
                }
              },
              splitLine: { // 分隔线
                length: 20, // 属性length控制线长
                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                  width: 3,
                  color: 'transparent', // 分割线
                  shadowColor: '#fff', // 默认透明
                  shadowBlur: 10
                }
              },
              title: {
                show: true,
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: 400,
                  fontSize: 14,
                  color: '#22B8BC',
                  shadowBlur: 10,
                  rich: {
                    a: {
                      color: 'red'
                    },
                    c: {
                      color: '#FFF', // 设置 动态数据字体的颜色
                      fontSize: '12', // 设置 动态数据字体的大小
                      height: 15,
                      width: 15,
                      backgroundColor: {
                        image: require('@/projects/3d-new/assets/处理总量1.png') // this.icon1
                      }
                    }
                  }
                },
                offsetCenter: ['0', '-10%']
              },
              detail: {
                borderColor: '#fff',
                shadowColor: '#fff', // 默认透明
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontSize: 48,
                  color: '#fff'
                },
                formatter: '{a|{value}}{b|分}{c| }',
                rich: {
                  b: {
                    color: '#fff',
                    fontSize: 12,
                    padding: [0, 2, -30]
                  }
                }
              },
              data: [
                { value: 95.6, name: '正常' }
              ]
            },
            {
              name: '外部刻度',
              type: 'gauge',
              center: ['50%', '55%'],
              radius: '96%',
              min: 0, // 最小刻度
              max: 100, // 最大刻度
              splitNumber: 10, // 刻度数量
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  color: [[1, 'rgba(0,0,0,0)']]
                }
              },
              axisTick: {
                show: true,
                splitNumber: 7,
                lineStyle: {
                  color: '#22B8BC',
                  width: 2
                },
                length: -10
              }, // 刻度样式
              splitLine: {
                show: true,
                length: 0,
                lineStyle: {
                  color: '#22B8BC' // 用颜色渐变函数不起作用
                }
              }, // 分隔线样式
              detail: {
                show: false
              },
              pointer: {
                show: false
              }
            },
            {
              name: '内部刻度',
              type: 'gauge',
              center: ['50%', '55%'],
              roundCap: true,
              radius: '64%',
              min: 0, // 最小刻度
              max: 100, // 最大刻度
              splitNumber: 10, // 刻度数量
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 10,
                  color: [[1, 'rgba(0,0,0,0)']]
                }
              },
              axisTick: {
                show: true,
                splitNumber: 6,
                lineStyle: {
                  color: 'rgba(rgba(34, 184, 188, .25)',
                  width: 3,
                  barBorderRadius: '50%'
                },
                length: -3,
                barBorderRadius: [2, 2, 2, 2]
              }, // 刻度样式
              splitLine: {
                show: true,
                length: 0,
                lineStyle: {
                  color: 'rgba(rgba(34, 184, 188, .25)' // 用颜色渐变函数不起作用
                }
              }, // 分隔线样式
              detail: {
                show: false
              },
              pointer: {
                show: false
              }
            }
          ]
        }
        return option
      },

.tipBox {
  width: 466px;
  height: 84px;
  margin: 0 auto 28px;
  display: flex;
  justify-content: space-between;
  padding: 18px 25px;
  text-align: center;
  font-size: 16px;
  position: relative;
}
.tipBox::before {
  position: absolute;
  top: 0%;
  left: 0;
  content: '';
  width: 466px;
  height: 2px;
  background: linear-gradient(270deg, rgba(0, 27, 55, 0) 0%, #5989cd 51%, rgba(0, 25, 52, 0) 100%);
  opacity: 0.65;
}
.tipBox::after {
  position: absolute;
  bottom: 0%;
  left: 0;
  content: '';
  width: 466px;
  height: 2px;
  background: linear-gradient(270deg, rgba(0, 27, 55, 0) 0%, #5989cd 51%, rgba(0, 25, 52, 0) 100%);
  opacity: 0.65;
}