如何减少 eCharts 的填充？答案

【问题标题】：How to reduce the padding from the eCharts?如何减少 eCharts 的填充？
【发布时间】：2020-04-16 14:01:33
【问题描述】：

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

知道怎么做吗？

【问题讨论】：

标签： javascript jquery css echarts

【解决方案1】：

在仪表中，您还可以使用图表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>

【讨论】：

【解决方案2】：

您可以从每个边缘的specify the spacing 中使用一个值、像素或百分比：

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

但是，当您隐藏 x 轴时，我会警告不要将 0 用于 top 或 bottom。图表线的一部分可能会被剪裁，如果它沿着轴的底部延伸，它看起来会变得不同粗细。

【讨论】：

【解决方案3】：

内边距会根据 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% 的空间 - 这会妨碍仪表的美观。

【讨论】：

你的宽度应该是100vw

【解决方案4】：

我一直在为同样的问题处理条形图。在选项下面添加。这样就解决了。

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

【讨论】：