Chr*_*Joo 6 gauge typescript echarts angular
我正在尝试使用百度的Echarts 实现仪表图。应用于其他图表的网格属性会被应用,但仪表图表中的底部空间不会被删除,如下图所示。实际上,网格属性删除了条形图中的空格,但事实并非如此。我还应用了半径(100%),但无法删除它。
我的打字稿代码如下。如图所示,如何去除底部空间?
谢谢。
打字稿:
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'
}
]
}
] };
}
Run Code Online (Sandbox Code Playgroud)
CSS
.graph-container {
border: 2px solid #DDDDDD;
width: 100%;
height: 260px;
position: relative;
justify-content: center;
align-items: center;
}
Run Code Online (Sandbox Code Playgroud)
HTML(角度)
<div [options]="chartOption" class="graph-container" echarts></div>
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
1981 次 |
| 最近记录: |