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

Question

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?

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.

Answer 1

In ECharts 4.X

As mentioned by some other posters, the correct way to get rid of the whitespace is to change options.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 .

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.

Answer 2

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

Answer 3

Adding values to your themes grid object, like so:

var theme = {

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

}

Answer 4

In ECharts 3 you can use the options grid.left , grid.top , grid.right and/or grid.bottom . According to the documentation, left and right default to 10%, and top and bottom default to 60 (px).

Documentation: 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中，您可以使用图表的组合制作图表/图表，并且每个图表部分的配置太多，如图例等...只需在他们的网站上查看他们的api文档和示例页面（组合部分）

Answer 6

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.