echarts 根据实际数据改变仪表盘颜色

情景:实际值>计划值 仪表盘颜色显示 绿色表示超过预期   相反则表示未达到预期

如图

echarts 根据实际数据改变仪表盘颜色_第1张图片 echarts 根据实际数据改变仪表盘颜色_第2张图片

js 控制 方法
if (factVal >= planVal) {
	_curOption.series[1].axisLine.lineStyle.color = [[0.0, 'lime'], [ _curOption.series[1].data[0].value/100, '#55CEA9'], [1, '#efefef']];
} else {
	_curOption.series[1].axisLine.lineStyle.color = [[0.0, 'lime'], [ _curOption.series[1].data[0].value/100, '#FA8565'], [1, '#efefef']];
};

gauge.js
 option = {
	tooltip : {
		 formatter: "{a}: {c}%"
	},	
    series : [
        {   
            startAngle: 180,
            endAngle: 0,
            name:'计划完成',
            type:'gauge',
            center : ['50%', '60%'],    // 默认全局居中
            radius : 220,
            min:0,
            max:100,
            splitNumber:10,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    color: [[0.0, 'lime'],[0, '#FA8565'],[1, '#EFEFEF']],
                    width: 150
                }
            },
            axisTick: {show:false},
            axisLabel: {show:false},
            splitLine: {show:false},
            pointer: {           // 分隔线
                color:'#EB7D64',
                width: 5,
                length: 250
            },
           detail : {
                show : false
            },
           
            data:[{value: 60}]
        },
        {   
            startAngle: 180,
            endAngle: 0,
            name:'实际完成',
            type:'gauge',
            center : ['50%', '60%'],    // 默认全局居中
            radius : 220,
            min:0,
            max:100,
            splitNumber:10,
            axisLine: {            // 坐标轴线
                lineStyle: {       // 属性lineStyle控制线条样式
                    width: 150
                }
            },
            axisTick: {show:false},
            axisLabel: {            // 坐标轴小标记
                textStyle: {       // 属性lineStyle控制线条样式
                    fontWeight: 'bolder',
                    fontSize : 16,
                    color: '#444'
                }
            },
            splitLine: {           // 分隔线
                length : 10,         // 属性length控制线长
                lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
                    width:1,
                    color: '#444'
                }
            },
            pointer: {           // 分隔线
                color:'#666666',
                width: 5,
                length:220
            },
            detail : {
                show : false
            },
            data:[{value: 40}]
        }
    ]
}


具体方法就是显示两个仪表盘  只给第二个仪表盘改变颜色
看不懂请自行领悟或者留言

你可能感兴趣的:(echars)