18910140161

echarts仪表盘设置起始与结束数值并设置显示数字个数

顺晟科技

2021-08-19 09:39:08

114

关于展示仪表盘设置起始与结束数值并设置显示数字个数中有三个字段设置,分钟为最小值,max为更大值,splitNumber为显示几个数值,用法为下。

实例一

选项={ 0

系列: [{ 0

:型'仪表,

起始角度: 180,

endAngle: 0,

min: 0,

max: 240,

splitNumber: 12,

itemStyle: {

color: '#58D9F9 ',

shadowColor: 'rgba(0,138,255,0.45)',

暗影模糊: 10,

shadowOffsetX: 2,

阴影偏移量: 2

},

进步: {

show: true,

roundCap: true,

宽度: 18

},

指针: {

图标: '路径://m 2090。36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616。194028 2092 .444859,617 .31956096

长度: '75% ',

宽度: 16,

偏移量输入: [0,' 5%']

},

axisLine: {

roundCap: true,

线型: {

宽度: 18

}

},

axisTick: {

splitNumber: 2,

线型: {

宽度: 2,

color: '#999 '

}

},

splitLine: {

长度: 12,

线型: {

宽度: 3,

color: '#999 '

}

},

axisLabel: {

距离: 30,

color: '#999 ',

fontSize: 20

},

title: {

show: false

},

详细信息: {

backgroundColor: '#fff ',

borderColor: '#999 ',

borderWidth: 2,

宽度: '60% ',

线高: 40,

高度: 40,

borderRadius: 8,

偏移量输入: [0,' 35%'],

值动画:为真,

formatter:函数(值){ 0

返回“{ value |”值。to fixed(0)" } { unit | km/h } ";

},

rich: {

value: {

fontSize: 50,

fontWeight: '更粗,

color: '#777 '

},

unit: {

fontSize: 20,

color: '#999 ',

padd :[0,0,-20,10]

}

}

},

数据: [{ 0

值: 100

}]

}]

};

以上代码为设置了更大和最小值为0到240:显示12个数值

效果:

实例2:

选项={ 0

系列: [{ 0

:型'仪表,

起始角度: 180,

endAngle: 0,

min: 0,

max: 240,

splitNumber: 6,

itemStyle: {

color: '#58D9F9 ',

shadowColor: 'rgba(0,138,255,0.45)',

暗影模糊: 10,

shadowOffsetX: 2,

阴影偏移量: 2

},

进步: {

show: true,

roundCap: true,

宽度: 18

},

指针: {

图标: '路径://m 2090。36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616。194028 2092 .444859,617 .31956096

长度: '75% ',

宽度: 16,

偏移量输入: [0,' 5%']

},

axisLine: {

roundCap: true,

线型: {

宽度: 18

}

},

axisTick: {

splitNumber: 2,

线型: {

宽度: 2,

color: '#999 '

}

},

splitLine: {

长度: 12,

线型: {

宽度: 3,

color: '#999 '

}

},

axisLabel: {

距离: 30,

color: '#999 ',

fontSize: 20

},

title: {

show: false

},

详细信息: {

backgroundColor: '#fff ',

borderColor: '#999 ',

borderWidth: 2,

宽度: '60% ',

线高: 40,

高度: 40,

borderRadius: 8,

偏移量输入: [0,' 35%'],

值动画:为真,

formatter:函数(值){ 0

返回“{ value |”值。to fixed(0)" } { unit | km/h } ";

},

rich: {

value: {

fontSize: 50,

fontWeight: '更粗,

color: '#777 '

},

unit: {

fontSize: 20,

color: '#999 ',

padd :[0,0,-20,10]

}

}

},

数据: [{ 0

值: 100

}]

}]

};

以上代码还是2至240的数值,但是只显示6个数值

效果:

注意:设置6会显示七个,因为0的起点不算在内。

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航