如何最小化百度echarts周围的空白

Question

我正在尝试合并百度的echarts（看起来很不错）。但是，当没有设置标题或使用工具栏时，实际图形周围会有很多空白。有没有办法让 graph/chart 使用更多的 canvas?

我目前的解决方案是在容器内添加一个额外的容器，然后将它的宽度和高度设置得比我想删除的边距更大，并通过设置 'top' 和 [=15= 来偏移它] 到相应边距的负值。不优雅，更重要的是，不健壮，但它暂时有效。

Answer 1

在 Echart 中，你可以通过组合图表来制作 chart/graph，每个图表部分的配置太多，例如图例等...看看他们的 api documantation on their web site and Example 页面（组合部分）

Answer 2

您可以使用网格上定义的属性（x、y、x2 和 y2）。文档中提到了这些属性：http://echarts.baidu.com/doc/doc-en.html#Grid

Answer 3

向主题网格对象添加值，如下所示：

var theme = {

    grid: {
        x: 40,
        y: 20,
        x2: 40,
        y2: 20
    }

}

Answer 4

在ECharts中3你可以使用选项grid.left, grid.top, grid.right and/or grid.bottom .根据文档，left和right默认为10%，top和bottom默认为60(px)。

文档：https://ecomfe.github.io/echarts-doc/public/en/option.html#grid.

const option = {
  // these are the grid default values
  grid: {
    top:    60,
    bottom: 60,
    left:   '10%',
    right:  '10%',
  },
  // your other options...
}

Answer 5

legend: {
padding: 0,
itemGap: 0,
data: [' ', ' ']
    },

在这里我们可以简单地删除图例的填充。即使您没有指定一个，它也会采用默认值。不幸的是，eCharts 没有提供通过选项设置 chartArea 的灵活选项。在 google 图表中，您可以 100% 提及它，它将覆盖所有可用区域。我尝试了上面提到的解决方法，之后可以涵盖更多 space。

Answer 6

ECharts 4、5

正如其他一些发帖者所提到的，摆脱空白的正确方法是更改 options.grid.

https://echarts.apache.org/en/option.html#grid

grid: {
  left: 0,
  top: 0,
  right: 0,
  bottom: 0
}

在ECharts 4中，网格属性的名称已更改为left、right、top和bottom。

感谢上面的回答为我指明了正确的方向！

此外，按照上面的建议更改 option.legend，对我的图表没有影响。

如何最小化百度echarts周围的空白

How to minimize whitespace around Baidu's echarts

javascript

charts

echarts

ECharts 4、5