我正试图使用百度的echarts(看起来非常好)。然而,如果没有设置标题或使用它们的工具栏,则实际图形周围会有很多空白。有没有办法让图表在画布上使用更多的空间?
我的当前解决方案是在容器内添加一个额外的 <div>
,然后将其宽度和高度设置为要删除的边距的大小,并通过将“top”和“left”设置为相应边距的负值来偏移它。这不太优雅,更重要的是,不够健壮,但目前还可以使用。
我正试图使用百度的echarts(看起来非常好)。然而,如果没有设置标题或使用它们的工具栏,则实际图形周围会有很多空白。有没有办法让图表在画布上使用更多的空间?
我的当前解决方案是在容器内添加一个额外的 <div>
,然后将其宽度和高度设置为要删除的边距的大小,并通过将“top”和“left”设置为相应边距的负值来偏移它。这不太优雅,更重要的是,不够健壮,但目前还可以使用。
正如其他一些帖子中提到的那样,去除空格的正确方法是更改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
对我的图表没有影响。const option = {
// these are the grid default values
grid: {
top: 60,
bottom: 60,
left: '10%',
right: '10%',
},
// your other options...
}
radius: '100%'
。 - Vic您可以使用网格(x,y,x2和y2)上定义的属性。这些属性在文档中有提到:http://echarts.baidu.com/doc/doc-en.html#Grid
var theme = {
grid: {
x: 40,
y: 20,
x2: 40,
y2: 20
}
}
legend: {
padding: 0,
itemGap: 0,
data: [' ', ' ']
},
在这里,我们可以简单地移除图例的填充。即使您没有指定一个,它也会采用默认值。不幸的是,eCharts没有通过选项提供设置chartArea的灵活选项。 在Google Charts中,您可以将其设置为100%,它将覆盖所有可用区域。我尝试了上述解决方法,并在此之后覆盖了更多的空间。