使用Echarts创建好看的仪表盘

测过了，直接在uniapp也可以，改下内置比例单位即可，长度或宽度

项目在用vue框架
思路是使用多个仪表盘拼接

data(){
        return{
          resultOption:{
          	backgroundColor: "#0b3c66",
            series: [
              //最外的圆圈（外层刻度）
              {
                type: 'gauge',
                center: [
                  '50%',
                  '55%'
                ],
                radius: '90%',
                startAngle: 220,
                endAngle: -40,
                min: 0,
                max: 100,
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 3,
                    color: [
                      [
                        1,
                        new echarts.graphic.LinearGradient(
                            0, 0, 1, 0, [
                              {
                                offset: 0,
                                color: 'rgba(22, 148, 255, 0.1)',
                              },
                              {
                                offset: 1,
                                color:'rgba(63, 250, 250, 0.9)',
                              }
                            ]
                        )
                      ],
                    ]
                  }
                },
                axisLabel: {
                  show: 0
                },
                axisTick: {
                  lineStyle: {
                    color:'rgba(63,250,250,0.7)',
                    width: 1
                  },
                  length: 5
                },
                splitLine: {
                  length: 8,
                  lineStyle: {
                    color:'rgba(63,250,250,0.8)',
                    width: 3
                  }
                },
              },
              // 外围刻度（第二层）
              {
                type: 'gauge',
                center: [
                  '50%',
                  '55%'
                ],
                radius: '85%', // 1行3个
                min: 0,
                max: 100,
                startAngle: 220,
                endAngle: -40,
                axisLine: { // 坐标轴线
                  lineStyle: { // 属性lineStyle控制线条样式
                    color: [
                      [
                        1,
                        new echarts.graphic.LinearGradient(
                            0, 0, 1, 0, [
                              {
                                offset: 0,
                                color: '#32abff',
                              },
                              {
                                offset: 1,
                                color:'rgba(63, 250, 250, 0.9)',
                              }
                            ]
                        )
                      ],
                    ],
                    fontSize: 20,
                    width: 2,
                    opacity: 1, //刻度背景宽度
                  }
                },
                splitLine: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                axisTick: {
                  show: false
                },
              },
              // 外围刻度（中间有背景颜色那块，包括里面的刻度）
              {
                type: 'gauge',
                center: [
                  '50%',
                  '55%'
                ],
                radius: '85%', // 1行3个
                splitNumber: 10,
                min: 0,
                max: 100,
                startAngle: 220,
                endAngle: -40,
                //分隔线样式
                axisTick: {
                  lineStyle: {
                    color:'rgba(63,250,250,0.8)',
                    width: 1
                  },
                  length: 5
                },
                //刻度样式
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 50,
                    color: [
                      [
                        1,
                        new echarts.graphic.LinearGradient(
                            0, 0, 1, 0, [
                              {
                                offset: 0,
                                color: 'rgba(0, 132, 255, 0.2)',
                              },
                              {
                                offset: 1,
                                color:'rgba(63, 250, 250, 0.4)',
                              }
                            ]
                        )
                      ],
                    ]
                  }
                },
                //整数分隔线
                splitLine: {
                  show: true,
                  length: 7,
                  lineStyle: {
                    color:'rgba(63, 250, 250, 0.8)',
                    width: 2
                  }
                },
                //刻度数字
                axisLabel: {
                  show: true,
                  distance: 1,
                  textStyle: {
                    color:'rgba(63, 250, 250, 0.8)',
                    fontSize: '12',
                    fontWeight: 'bold'
                  }
                },
              },
                //从外数第三条线
              {
                type: 'gauge',
                center: [
                  '50%',
                  '55%'
                ],
                radius: '65%', // 1行3个
                splitNumber: 10,
                min: 0,
                max: 100,
                startAngle: 220,
                endAngle: -40,
                axisLine: { // 坐标轴线
                  lineStyle: { // 属性lineStyle控制线条样式
                    color: [
                      [
                        1,
                        new echarts.graphic.LinearGradient(
                            0, 0, 1, 0, [
                              {
                                offset: 0,
                                color: 'rgba(66, 180, 255, 0.09)',
                              },
                              {
                                offset: 1,
                                color:'rgba(63, 250, 250, 0.9)'
                              }
                            ]
                        )
                      ],
                    ],
                    fontSize: 20,
                    width: 2,
                    opacity: 1, //刻度背景宽度
                  }
                },
                splitLine: {
                  show: false
                },
                axisLabel: {
                  show: false
                },
                pointer: {
                  show: false
                },
                axisTick: {
                  show: false
                },
                detail: {
                  show: 0
                }
              },
              // 内侧指针、数值显示
              {
                name: '',
                center: [
                  '50%',
                  '50%'
                ],
                type: 'gauge',
                radius: '74%', // 1行3个
                splitNumber: 10,
                min: 0,
                max: 100,
                startAngle: 220,
                endAngle: -40,
                axisLine: {
                  show: true,
                  lineStyle: {
                    width: 50,
                    color: [
                      [
                        1,
                        new echarts.graphic.LinearGradient(
                            0, 0, 1, 0, [
                              {
                                offset: 0,
                                color: 'rgba(0, 199, 187, 0)',
                              },
                              {
                                offset: 1,
                                color: 'rgba(0, 199, 187, 0)',
                              }
                            ]
                        )
                      ],
                    ]
                  }
                },
                axisTick: {
                  show: 0,
                },
                splitLine: {
                  show: 0,
                },
                axisLabel: {
                  show: 0
                },
                pointer: {
                  show: true,
                  length: '102%',
                  width: 5,
                  color: '#9bd6ff'
                },
                data: [
                  {
                    value: 1,
                    name: '能耗',
                    title: {
                      offsetCenter: ['0%', '50%'],
                      fontSize: 15,
                      color:'#4fe8d6'
                    },
                    detail: {
                      offsetCenter: ['0%', '20%'],
                      valueAnimation: true,
                      fontSize: 22,
                      color:'#4fe8d6'
                    }
                  }
                ]
              }
            ]
          }
        }
    },

methods:{
	initEchart(id, option) {
	  const chartDom = document.getElementById(id);
	  const myChart = echarts && echarts.init(chartDom);
	  myChart.setOption(option)
	  window.addEventListener('resize',myChart.resize)
	}
}

mounted(){
	//修改最中间文字
	this.resultOption.series[4].data[0].value = '22.8'
    this.resultOption.series[4].data[0].name='消耗电能\n(万)KWh'
	this.initEchart('echart1', this.resultOption)//传入id值
}