vue+charts仪表盘 填充的颜色 随着 数字变动

最终效果:

颜色可以自己调整

注意:我这是在vue中的写法,在函数调用和初始化echarts时需要注意

warning() {
        // 计算颜色随着指针一起走动
        var dataArr = [{
        // show: false,
          value: '300',
          value1: '500',
          value2: '12'
        }];
        var value = dataArr[0].value;
        var value1 = dataArr[0].value1;
        var value2 = dataArr[0].value2;
        // var min = value.split('.');
        // var degrees = 180 - (180 * value / 15); //蓝色刻度尺计算
        // var degrees = (3 - value) / 50 * 30; //蓝色刻度尺计算
        // var degrees = (500 - value) / 50 * 30; //蓝色刻度尺计算
        // var degrees = (500 - value) / 50 * 30; //蓝色刻度尺计算
        
        //计算三个表盘数字跟着表盘颜色一起动
        var num = value / 300;
        var num1 = value1 / 500;
        var num2 = value2 / 12;
        var colorSet = [
            [num, '#00B3FE'],
            [1, '#212D43']
        ];
        // 指针走动为渐变色
        //var axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{  //此处做过修改需注意因为直接拿过来用不了
        var axislineColor = new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: 'rgba(0, 201, 153, 1)'
            },
            {
                offset: 1,
                color: 'rgba(248, 6, 6, 1)'
            },  
        ]);
        let myChart = this.$echarts.init(document.getElementById('myChart'));
        myChart.setOption({
          tooltip : {
            formatter: "{a} <br/>{c} {b}"
          },
          //去掉保存图片和刷新功能
          toolbox: {
            show: false,
            feature: {
              restore: {show: false},
              saveAsImage: {show: false}
            }
          },
          series : [
                {
                    name: '空气质量:',
                    type: 'gauge',
                    z: 3,
                    min: 0,
                    max: 500,
                    splitNumber: 10,
                    radius: '60%',
                    // axisLine: {
                    //     lineStyle: {
                    //         width: 10,
                    //         color: [[0.1, 'green'], [0.2, 'yellow'],[0.3, 'orange'],[0.4,'#db555e'],[0.5,'#ba3779'],[1.1,'#881326'] ]
                    //     }
                    // },
                    
                    // 去掉指针
                    pointer: {
                        show:false
                    },
                     axisLine: { // 坐标轴线  
                        lineStyle: { // 属性lineStyle控制线条样式  
                          width: 10,
                          color: [
                                [num1, axislineColor],
                                [1, 'rgba(15, 235, 255, 0.2)']
                          ]
                        }
                    },
                    axisTick: {
                      show:false //隐藏小刻度线
                        // length: 15,
                        // lineStyle: {
                        //     color: 'auto'
                        // }
                    },
                    
                    //刻度分割线样式
                    splitLine: {
                      show:false //隐藏大刻度线
                        // length: 20,
                        // lineStyle: {
                        //     color: 'white'
                        // }
                    },
                    //刻度数字样式
                    axisLabel: {
                        fontWeight:'bold',
                        color: '#0085FF',
                        textStyle: {
                          color: '#00B3FE',
                          fontSize: '10',
                          padding:-15,
                        },
                        
                    },
                    // 中间数字
                     detail : {
                        //仪表盘中间的数字
                        // formatter: '空气质量',
                        offsetCenter:['0%','0%'],
                        fontWeight: 'bolder',
                        borderRadius: 3,
                        // backgroundColor: '#0085FF',
                        fontSize:36,
                        width: 100,
                        color: '#00C999',
                        padding:[5,15,2,15]
                    },
                    // 每个仪表盘对应的下面白色大标题
                    title:{
                        show:true,
                        offsetCenter:[0,'80%'],
                        fontSize:18,
                        color: 'white',
                    },
                   data: [{value: 70, name: '空气质量'}],
                },
                {
                    name: 'PM2.5:',
                    type: 'gauge',
                    center: ['20%', '55%'],
                    radius: '40%',
                    min:0,
                    max:350,
                    valu:55,
                    endAngle:45,
                    splitNumber:5,
                    axisLine: { // 坐标轴线  
                      lineStyle: { // 属性lineStyle控制线条样式  
                         width: 10,
                          color: [
                                [num, axislineColor],
                                [1, 'rgba(15, 235, 255, 0.2)']
                          ]
                      }
                  },
                

                    axisTick: {
                         show:false
                    },
                    splitLine: {
                        show:false
                    },
                    pointer: {
                        width:5,
                        color:'red',
                        show:false
                    },
                    //刻度数字样式
                    axisLabel: {
                        fontWeight:'bold',
                        color: '#0085FF',
                        fontSize:10,   //改变仪表盘内刻度数字的大小
                        padding:-17,
                        
                    },
                    // 仪表盘中间的数字
                    detail: {
                        // formatter: 'PM 2.5',
                        offsetCenter:['0%','0%'], //调整中间数字位置
                        fontWeight: 'bolder',
                        borderRadius: 3,
                        // backgroundColor: '#0085FF',
                        fontSize:24,
                        width: 100,
                        color: '#FD6760',
                        padding:[5,15,2,15]
                    },
                    // 每个仪表盘对应的白色大标题
                     title:{
                        show:true,
                        offsetCenter:['15%','85%'],
                        fontSize:20,
                        color: 'white',
                    },
                   data: [{value: 70, name: 'PM 2.5'}],
                },
                {
                    name: '风力预警',
                    type: 'gauge',
                    //仪表盘位置
                    center: ['79%', '55%'],
                    //仪表盘位置
                    radius: '40%',
                    min:0,
                    max:12,
                    startAngle:130,
                    splitNumber:3, //定义的最大最小之间每个间隔数量
                    //仪表盘弧线宽度
                    axisLine: { // 坐标轴线  
                      lineStyle: { // 属性lineStyle控制线条样式  
                          width: 10,
                          color: [
                                [num2, axislineColor],
                                [1, 'rgba(15, 235, 255, 0.2)']
                          ]
                      }
                  },
                    //仪表盘小刻度显隐
                    axisTick: {
                        show:false
                    },
                    //仪表盘大刻度显隐
                    splitLine: {
                        show:false
                    },
                    //仪表盘指针样式
                    pointer: {
                        width:5,//指针的宽度
                        length:"60%", //指针长度，按照半圆半径的百分比
                        shadowColor : 'blue', //默认透明
                        shadowBlur: 5,
                        show:false
                    },

                    //刻度数字样式
                    axisLabel: {
                        fontWeight:'bold',
                        color: 'auto',
                        fontSize:8,   //改变仪表盘内刻度数字的大小
                        padding:-17,
                        textStyle: {
                          color: '#00B3FE',
                          fontSize: '10',
                          padding:-15,
                        },
                    },
                     detail: {
                        //说明数字大小
                        formatter: '{value}级',
                        //仪表盘中间的数字
                        offsetCenter:['0%','0%'],
                        fontWeight: 'bolder',
                        borderRadius: 3,
                        // backgroundColor: '#0085FF',
                        fontSize:24,
                        width: 100,
                        color: '#00C999',
                        padding:[5,15,2,15]
                    }, 
                    // 每个仪表盘对应的白色大标题
                    title:{
                        show:true,
                        offsetCenter:['-10%','80%'],
                        fontSize:18,
                        color: 'white',
                    },
                   data: [{value:3, name: '风力预警'}],
                }
          ]
        })
      }