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

Question

我正试图使用百度的echarts（看起来非常好）。然而，如果没有设置标题或使用它们的工具栏，则实际图形周围会有很多空白。有没有办法让图表在画布上使用更多的空间？

我的当前解决方案是在容器内添加一个额外的 <div>，然后将其宽度和高度设置为要删除的边距的大小，并通过将“top”和“left”设置为相应边距的负值来偏移它。这不太优雅，更重要的是，不够健壮，但目前还可以使用。

- max.ott

---

你没有表达清楚你的意思，你指的是哪一个图表？他们网站上有很多例子，但并不与你的问题相符。 - Kamyar Gilak

我的问题适用于所有图表。它们都具有相同的结构。它们有标题和工具栏的空间，如果您不需要它们，图表就不会填充该空间。在我的情况下，我在图表的 div 外部拥有自己的标题和工具栏。 - max.ott

Answer 1

ECharts 4、5中

正如其他一些帖子中提到的那样，去除空格的正确方法是更改options.grid。

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

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

在ECharts 4中，网格属性的名称已更改为left，right，top和bottom。感谢以上答案指引我找到正确的方向！另外，如上所建议更改option.legend对我的图表没有影响。

- bjornl

---

至少只有20分钟@YegorZaremba - 我记得我曾经为这个细节苦苦挣扎了很长时间！ - bjornl

链接已失效。新链接为 https://echarts.apache.org/en/option.html#grid - foxiris

Answer 2

在 ECharts 3 中，您可以使用选项 grid.left、grid.top、grid.right 和/或 grid.bottom。根据文档，左和右默认为10％，上和下默认为60（像素）。

文档：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...
}

- sierrasdetandil

---

@David 对于饼图，您需要设置 radius: '100%'。 - Vic

Answer 3

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

- arbc

---

此答案适用于 ECharts 2。有关 ECharts 3，请参见 https://dev59.com/q14c5IYBdhLWcg3wUI0N#45666132。 - sierrasdetandil

Answer 4

向您的主题网格对象添加值，就像这样：

var theme = {

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

}

- Silver Ringvee

---

感谢指引方向。我已经提供了ECharts 4的更新答案。 - bjornl

Answer 5

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

在这里，我们可以简单地移除图例的填充。即使您没有指定一个，它也会采用默认值。不幸的是，eCharts没有通过选项提供设置chartArea的灵活选项。 在Google Charts中，您可以将其设置为100％，它将覆盖所有可用区域。我尝试了上述解决方法，并在此之后覆盖了更多的空间。

- adityajain019

Answer 6

在 Echart 中，您可以使用图表的组合来制作图表/图形，并且每个图表部分都有太多的配置选项，例如图例等。只需查看他们网站上的API文档和示例页面（组合部分）即可了解更多信息。

- Kamyar Gilak