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

来源：互联网发布：软件狗软件怎么破解编辑：程序博客网时间：2024/05/23 00:10

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

如图

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}]        }    ]}

具体方法就是显示两个仪表盘只给第二个仪表盘改变颜色

看不懂请自行领悟或者留言

0 0