我尝试用百度的Echarts实现一个 Jmeter 图,应用了其他图表应用的网格属性,但是 Jmeter 图底部的空格没有去掉,如下图所示,实际上,柱状图中的网格属性去掉了空格,但是不是这样的,我也应用了半径(100%),但是那个去掉不了。
我的 typescript 代码如下。我应该如何删除底部的空间,如图所示?
谢谢你。
typescript :
public chartOption: any;
getData( ){
this.chartOption = {
grid: {
left: 0,
top: 0,
right: 0,
bottom: -100
},
series: [
{
type: 'gauge',
startAngle: 180,
endAngle: 0,
min: 0,
max: 1,
splitNumber: 8,
radius: '100%',
center: ['50%', '50%'],
axisLine: {
lineStyle: {
width:10,
color: [
[0.25, '#FF6E76'],
[0.5, '#FDDD60'],
[0.75, '#58D9F9'],
[1, '#7CFFB2']
]
}
},
pointer: {
icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
length: '42%',
width: 20,
offsetCenter: [0, '-40%'],
itemStyle: {
color: 'auto'
}
},
axisTick: {
length: 7,
lineStyle: {
color: 'auto',
width: 2
}
},
splitLine: {
length: 20,
lineStyle: {
color: 'auto',
width: 5
}
},
axisLabel: {
color: '#464646',
fontSize: 10,
distance: -60,
formatter: function (value) {
if (value === 0.875) {
return 'GOOD';
} else if (value === 0.625) {
return '';
} else if (value === 0.375) {
return '';
} else if (value === 0.125) {
return ' BAD';
}
return '';
}
},
title: {
offsetCenter: [0, '-20%'],
fontSize: 15
},
detail: {
fontSize: 20,
offsetCenter: [0, '0%'],
valueAnimation: true,
formatter: function (value) {
return Math.round(value * 100) + '%';
},
color: 'auto'
},
data: [
{
value: 0.7,
name: 'Not Bad'
}
]
}
] };
}
卫星通信系统
.graph-container {
border: 2px solid #DDDDDD;
width: 100%;
height: 260px;
position: relative;
justify-content: center;
align-items: center;
}
HTML(Angular )
<div [options]="chartOption" class="graph-container" echarts></div>
2条答案
按热度按时间31moq8wy1#
我通过更改“radius”和“center”属性值解决了这个问题,如下所示
~~
半径:“120%”,
居中:[“50%”,“80%”]。
~~
ebdffaop2#
只需在图表选项中添加以下代码:
请检查URL以获取参考:https://xieziyu.github.io/ngx-echarts/#/advanced/advanced-usage