如何设置绘图区域和容器大小一样
发布网友
发布时间：2022-04-06 12:43
共2个回答
热心网友
时间：2022-04-06 14:13
通过查看相关API得知，绘图区域与容器之间的间距是由几个属性值控制，我们有必要先来了解一下grid节点的一下几个属性以及作用：
grid
直角坐标系内绘图网格
名称
默认值
描述
{number} x 80 直角坐标系内绘图网格左上角横坐标，数值单位px
{number} y 60 直角坐标系内绘图网格左上角纵坐标，数值单位px
{number} x2 80 直角坐标系内绘图网格右下角横坐标，数值单位px
{number} y2 60 直角坐标系内绘图网格右下角纵坐标，数值单位px
{number} width 自适应 直角坐标系内绘图网格（不含坐标轴）宽度，默认为总宽度 - x - x2，数值单位px，指定width后将忽略x2，见下图。
{number} height 自适应 直角坐标系内绘图网格（不含坐标轴）高度，默认为总宽度 - y - y2，数值单位px，指定height后将忽略y2，见下图。
{color}backgroundColor '#fff' 背景颜色。
{number} borderWidth 1 边框线宽
{color} borderColor '#ccc' 边框颜色。
图形表现如下：
这样我们就不难理解为何默认情况下绘图区域的边缘与容器之间存在一定的间距。都是因为默认情况下grid的x、x2、y、y2做了数据设置。
倘若我们需要缩小它们两者之间的间距，我们需要自己在options内对图表参数进行设置，示例代码形如：
grid:{
x:0,
y:0,
x2:0,
y2:0
},
转载
热心网友
时间：2022-04-06 15:31
grid
直角坐标系内绘图网格
名称
默认值
描述
{number} x 80 直角坐标系内绘图网格左上角横坐标，数值单位px
{number} y 60 直角坐标系内绘图网格左上角纵坐标，数值单位px
{number} x2 80 直角坐标系内绘图网格右下角横坐标，数值单位px
{number} y2 60 直角坐标系内绘图网格右下角纵坐标，数值单位px
{number} width 自适应 直角坐标系内绘图网格（不含坐标轴）宽度，默认为总宽度 - x - x2，数值单位px，指定width后将忽略x2，见下图。
{number} height 自适应 直角坐标系内绘图网格（不含坐标轴）高度，默认为总宽度 - y - y2，数值单位px，指定height后将忽略y2，见下图。
{color}backgroundColor '#fff' 背景颜色。
{number} borderWidth 1 边框线宽
{color} borderColor '#ccc' 边框颜色。
图形表现如下：
这样我们就不难理解为何默认情况下绘图区域的边缘与容器之间存在一定的间距。都是因为默认情况下grid的x、x2、y、y2做了数据设置。
倘若我们需要缩小它们两者之间的间距，我们需要自己在options内对图表参数进行设置，示例代码形如：
grid:{
x:0,
y:0,
x2:0,
y2:0
},
有其他任何ECharts图表的使用问题敬请留言讨论，谢谢您的关注！
转载
