echarts仪表盘

参考他人案例

option = {
    backgroundColor: '#1b1b1b',
    series: [
        {
           type: 'gauge',
            min: 0,
            max: 220,
            splitNumber: 10,
            radius: '70%',
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                  //  color: [[0.01, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
                    color: [[0.3, 'rgba(42,144,255,0.95)'],             
                    [0.82, 'rgba(245,245,220,0.05)']
                    ],
                    width: 15,//盘表圆宽度
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 15,
                    
                },
                roundCap:true
            },
            //capType: 'round',
            startAngle: 180,//盘角度起始位置
            endAngle:-45,//盘角度截至位置
            axisLabel: {            // 坐标轴小标记 -刻度数
                fontWeight: 'bolder',
               // color: '#fff',
                shadowColor: '#fff', //默认透明
                shadowBlur: 15,
                show:false
            },
            axisTick: {            // 坐标轴小标记
                length: 9,        // 属性length控制线长
                // lineStyle: {       // 属性lineStyle控制线条样式
                //   // color:[1,'rgba(255,255,0,0.5)'],
                //     shadowColor: 'rgba(124,252,0,5)', //默认透明
                //     shadowBlur: 10
                // },
                //show:false
                 
            },
            splitLine: {           // 坐标轴大标记
                length:25,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                    width: 5,
                    color: '#fff',
                    shadowColor: '#fff', //默认透明
                    shadowBlur: 15
                },
                show:false
            },
            pointer: {           // 指针
                shadowColor: '#fff', //默认透明
                shadowBlur: 5,
                length: 0,
                show:false
            },
            title: {//data-name 样式，位置
                 offsetCenter: [0, '-15%'],       //改变标题的位置
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    fontWeight: 'bolder',
                    fontSize: 28,
                     fontStyle: 'normal',
                    color: '#fff'
                }
            },
            detail: {//data-Value 样式，位置
              
                offsetCenter: [0, -110],       // x, y，单位px
                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                    //fontWeight: 'bolder',
                    color: '#fff'
                },
                fontSize: 35,
                formatter: '{value}%'
            },
            data: [{value:45.5,name:'园区温度'}],
        //roundCap: true
        },
         
    ]
};

效果如下：

渐变色

这里的渐变色，还是问题的，如何提取Value 的值，比如45.5%， 在
offset1中 设置为’value’*0.3,
offset2中设置为 ‘value’*0.7,
offset3为空缺 rgba(245,245,220,0.01)

 axisLine: {             
                lineStyle: {
                  color: [
                    [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0.1,
                        color: "#FFC600"
                      },
                      {
                        offset: 0.6,
                        color: "#30D27C"
                      },
                      {
                        offset: 1,
                        color: "rgba(245,245,220,0.01)"
                      }
                    ])
                  ]
                ]
                  
                }
             }