Javascript 如何从零件上减少填充物？

我正在使用

echart

可视化web应用程序中的一些数据。我使用基本规格图进行可视化。如果您注意到下图，则说明图表中的空白太多。我想删除这些填充，理想情况下让图表占据容器内100%的空间

以下是javascript代码：

//设置图 仪表\基本\选项={

            // 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'}
                    ]
                }
            ]
        };

//添加标题
//标题：{
//文本：“服务器资源使用情况”，
//潜台词：“随机演示数据”，
//x:‘中心’
//},
//添加工具提示
工具提示：{
格式化程序：{a}
{b}:{c}%
},
//添加系列
系列：[
{
名称：'发票总额'，
类型：“仪表”，
中心：['50%，'55%']，
详细信息：{格式化程序：{value}%}，
数据：[
{值：50，名称：'发票总额'}
]
}
]
};

知道怎么做吗

---

填充将根据div的大小自动调整

下面的div将使用整个页面，并用大量空格呈现仪表

<div id="main" style="width: 100vw;height:100vh;"></div>

下面一个是一个紧凑的

<div id="main" style="width: 100vw;height:100vh;"></div>

检查这把小提琴-

---

我想删除这些填充，理想情况下让图表占据100%的空间-这会妨碍仪表的美观。

填充会根据div的大小自动调整

下面的div将使用整个页面，并用大量空格呈现仪表

<div id="main" style="width: 100vw;height:100vh;"></div>

下面一个是一个紧凑的

<div id="main" style="width: 100vw;height:100vh;"></div>

检查这把小提琴-

---

我想删除这些填充，理想情况下让图表占据100%的空间-这会妨碍仪表的美观。

在仪表中，您还可以使用图表控制填充。默认情况下，半径为75%，对于完全填充空间，您需要设置新值，例如：

选项={
系列：[{
名称：'发票总额'，
类型：“仪表”，
半径：“100%”，//这个
中心：['50%，'50%']，
详细信息：{格式化程序：{value}%}，
数据：[{值：50，名称：'发票总额'}]
}]
};
var myChart=echarts.init（document.getElementById（'main'）；
myChart.setOption（选项）
在仪表中，您还可以使用图表控制填充。默认情况下，半径为75%，对于完全填充空间，您需要设置新值，例如：


选项={
系列：[{
名称：'发票总额'，
类型：“仪表”，
半径：“100%”，//这个
中心：['50%，'50%']，
详细信息：{格式化程序：{value}%}，
数据：[{值：50，名称：'发票总额'}]
}]
};
var myChart=echarts.init（document.getElementById（'main'）；
myChart.setOption（选项）

您的宽度应为100vw您的宽度应为100vw