关于echarts仪表盘设置起始与结束数值并设置显示数字个数中有三个字段设置,min为最小值,max为最大值,splitNumber为显示几个数值,用法为下。
实例1
option = { series: [{ type: 'gauge', startAngle: 180, endAngle: 0, min: 0, max: 240, splitNumber: 12, itemStyle: { color: '#58D9F9', shadowColor: 'rgba(0,138,255,0.45)', shadowBlur: 10, shadowOffsetX: 2, shadowOffsetY: 2 }, progress: { show: true, roundCap: true, width: 18 }, pointer: { icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z', length: '75%', width: 16, offsetCenter: [0, '5%'] }, axisLine: { roundCap: true, lineStyle: { width: 18 } }, axisTick: { splitNumber: 2, lineStyle: { width: 2, color: '#999' } }, splitLine: { length: 12, lineStyle: { width: 3, color: '#999' } }, axisLabel: { distance: 30, color: '#999', fontSize: 20 }, title: { show: false }, detail: { backgroundColor: '#fff', borderColor: '#999', borderWidth: 2, width: '60%', lineHeight: 40, height: 40, borderRadius: 8, offsetCenter: [0, '35%'], valueAnimation: true, formatter: function (value) { return '{value|' + value.toFixed(0) + '}{unit|km/h}'; }, rich: { value: { fontSize: 50, fontWeight: 'bolder', color: '#777' }, unit: { fontSize: 20, color: '#999', padding: [0, 0, -20, 10] } } }, data: [{ value: 100 }] }] };
以上代码为设置了最大和最小值为0到240:显示12个数值
效果:
实例2:
option = { series: [{ type: 'gauge', startAngle: 180, endAngle: 0, min: 0, max: 240, splitNumber: 6, itemStyle: { color: '#58D9F9', shadowColor: 'rgba(0,138,255,0.45)', shadowBlur: 10, shadowOffsetX: 2, shadowOffsetY: 2 }, progress: { show: true, roundCap: true, width: 18 }, pointer: { icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z', length: '75%', width: 16, offsetCenter: [0, '5%'] }, axisLine: { roundCap: true, lineStyle: { width: 18 } }, axisTick: { splitNumber: 2, lineStyle: { width: 2, color: '#999' } }, splitLine: { length: 12, lineStyle: { width: 3, color: '#999' } }, axisLabel: { distance: 30, color: '#999', fontSize: 20 }, title: { show: false }, detail: { backgroundColor: '#fff', borderColor: '#999', borderWidth: 2, width: '60%', lineHeight: 40, height: 40, borderRadius: 8, offsetCenter: [0, '35%'], valueAnimation: true, formatter: function (value) { return '{value|' + value.toFixed(0) + '}{unit|km/h}'; }, rich: { value: { fontSize: 50, fontWeight: 'bolder', color: '#777' }, unit: { fontSize: 20, color: '#999', padding: [0, 0, -20, 10] } } }, data: [{ value: 100 }] }] };
以上代码还是2至240的数值,但是只显示6个数值
效果:
注意:设置6会显示7个,因为0的起点不算在内。
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!