javascript 如何减少百度echarts周围的空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28065844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to minimize whitespace around Baidu's echarts
提问by max.ott
I'm trying to incorporate Baidu's echarts (which look really good). However, there is a lot of whitespace around the actual graph when one doesn't set a title nor uses their toolbar. Is there a way to have the graph/chart use more of the canvas?
我正在尝试合并百度的 echarts（看起来非常好）。然而，当一个人既没有设置标题也没有使用他们的工具栏时，实际图形周围会有很多空白。有没有办法让图形/图表使用更多的画布？
My current solution to add an extra inside the container one and then set it's width and height to be be bigger by the margins I want to remove and the offset it by setting 'top' and 'left' to negative values of the respective margins. Not elegant and more importantly, not robust, but it works for the moment.
我目前的解决方案是在容器内添加一个额外的东西，然后将它的宽度和高度设置为更大的我想要删除的边距，并通过将“顶部”和“左”设置为相应边距的负值来偏移它。不优雅，更重要的是，不健壮，但它暂时有效。
回答by bjornl
In ECharts 4.X
在 ECharts 4.X 中
As mentioned by some other posters, the correct way to get rid of the whitespace is to change options.grid.
正如其他一些海报所提到的，摆脱空白的正确方法是更改options.grid.
https://ecomfe.github.io/echarts-doc/public/en/option.html#grid
https://ecomfe.github.io/echarts-doc/public/en/option.html#grid
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0
}
In ECharts 4, the names of the grid properties have been changed to left, right, top, and bottom.
在ECharts 4，网格属性的名称已更改为left，right，top，和bottom。
Thanks to the answers above for pointing me in the right direction!
感谢上面的答案为我指明了正确的方向！
Further, changing the option.legend, as suggested above, had no effect on my chart.
此外，option.legend如上所述，更改对我的图表没有影响。
回答by arbc
You can use the properties defined on the grid (x, y, x2 and y2). These properties are mentioned on the documentation: http://echarts.baidu.com/doc/doc-en.html#Grid
您可以使用网格上定义的属性（x、y、x2 和 y2）。文档中提到了这些属性：http: //echarts.baidu.com/doc/doc-en.html#Grid
回答by Silver Ringvee
Adding values to your themes grid object, like so:
向主题网格对象添加值，如下所示：
var theme = {
grid: {
x: 40,
y: 20,
x2: 40,
y2: 20
}
}
回答by sierrasdetandil
In ECharts 3you can use the options grid.left, grid.top, grid.rightand/or grid.bottom. According to the documentation, left and right default to 10%, and top and bottom default to 60 (px).
在ECharts 3，你可以使用的选项grid.left，grid.top，grid.right和/或grid.bottom。根据文档，left和right默认为10%，top和bottom默认为60（px）。
Documentation: https://ecomfe.github.io/echarts-doc/public/en/option.html#grid.
文档：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...
}
回答by adityajain019
legend: {
padding: 0,
itemGap: 0,
data: [' ', ' ']
},
In here we can just simply remove the padding of the legend. even though you are not specifying one, it is taking the default values. Unfortunately, eCharts doesn't give flexible option of setting chartArea through options. In google Charts you can mention it 100% and it'll cover all the available area. I tried the above mentioned work around and could cover a bit more space after that.
在这里，我们可以简单地删除图例的填充。即使您没有指定一个，它也会采用默认值。不幸的是，eCharts 没有提供通过选项设置图表区域的灵活选项。在谷歌图表中，您可以 100% 提及它，它将涵盖所有可用区域。我尝试了上述解决方法，之后可以覆盖更多空间。
回答by Kamyar Gilak
in Echart u can make chart/graph with combination of the chart, and thre is too many config for every charts section, like legend, etc... just have look at their api documantationon their web site and Examplepage (Combinations part)
在 Echart 中，您可以结合图表制作图表/图表，并且每个图表部分的配置太多，例如图例等......只需在他们的网站和示例页面（组合部分）上查看他们的api 文档即可
