我正在使用 echarts
用于可视化我的网络应用程序中的一些数据。我正在使用基本仪表图进行可视化。如果您注意到下图,则图表中的填充过多。我想删除那些填充,理想情况下让图表占据容器内 100% 的空间?
这是javascript代码:
//设置图表
Gauge_basic_options = {
// Add title
//title: {
// text: 'Server resources usage',
// subtext: 'Random demo data',
// x: 'center'
//},
// Add tooltip
tooltip: {
formatter: "{a} <br/>{b}: {c}%"
},
// Add series
series: [
{
name: 'Total Invoices',
type: 'gauge',
center: ['50%', '55%'],
detail: {formatter:'{value}%'},
data: [
{value: 50, name: 'Total Invoices'}
]
}
]
};
知道怎么做吗?
最佳答案
在仪表中,您还可以使用图表 radius 控制填充。 .默认情况下,半径为 75%,对于完全填充空间,您需要设置新值,例如:
option = {
series: [{
name: 'Total Invoices',
type: 'gauge',
radius: '100%', // this
center: ['50%', '50%'],
detail: {formatter:'{value}%'},
data: [ {value: 50, name: 'Total Invoices'} ]
}]
};
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
<div id="main" style="width:300px; height:300px;"></div>
关于javascript - 如何减少 eCharts 的填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61252170/