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