如何減少 eCharts 的填充？

Question

我正在使用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'}
                    ]
                }
            ]
        };

知道怎么做嗎？

Answer 1

在儀表中，您還可以使用圖表 半徑控制填充。 默認情況下，半徑為 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>

Answer 2

填充會根據 div 的大小自動調整。

例如：下面的 div 將使用整個頁面並使用大量空格呈現儀表

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

下面是一個緊湊的

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

檢查這個小提琴 - http://jsfiddle.net/athishayd/x5Lc3mr6/1/

我想刪除那些填充，理想情況下讓圖表占據 100% 的空間——這會妨礙儀表的美觀。

Answer 3

我正在為同樣的問題處理條形圖。 在選項下面添加。 這解決了它。

grid: {
        x: 0,
        y: 0,
        x2: 0,
        y2: 0
    }

Answer 4

您可以使用值、像素或百分比來指定grid與每個邊緣的間距：

var option = {
  grid: {
    left: '10%',
    right: '10%',
    top: 0,
    bottom: 0
  }
} 

但是，當您隱藏 x 軸時，我會警告不要將0用於top或bottom 。 圖表線的一部分可能會被剪裁，如果它沿着軸的底部延伸，它看起來會有所不同。