Question

我正在尝试合并百度的echarts（看起来非常好）。但是，如果没有设置标题或使用工具栏，实际图形周围会有很多空白。有没有办法让图表/图表使用更多的画布？

我目前的解决方案是在容器中添加一个额外的，然后将其宽度和高度设置为我要删除的边距更大，并通过将“顶部”和“左侧”设置为负值来抵消它各自的利润。不优雅，更重要的是，不健壮，但它暂时起作用。

Answer 1

在ECharts 4.X

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

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

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

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

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

进一步，如上所述，更改option.legend对我的图表没有影响。

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和/或grid.bottom。根据文档，左和右默认为10％，顶部和底部默认为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

在Echart中你可以使用图表的组合来制作图表/图表，并且每个图表部分的cos配置太多，如图例等...只需在他们的网站上查看他们的api documantation即可Example页面（组合部分）

Answer 6

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

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

如何最大限度地减少百度echarts周围的空白

6 个答案:

在ECharts 4.X