Echarts grid组件：调整图表的位置

官网配置项

1、先了解下grid

这是echarts基本的代码结构，来瞅一眼grid的位置；
我们通过配置grid组件，来调整图表在div容器里的位置，以及图表的背景样式；

option = {
  tooltip: {...}, // 提示框组件
  grid: {...},   // <-- 没错，就是要配置这个东东！！！
  xAxis: [{...}], // x轴
  yAxis: [{...}], // x轴
  series: [{...}] // 你美丽的图表（数据和样式）
}

2、调整图表位置

入正题 — 先试着调整图表在我们div里的位置，也就是图表离容器的距离

其实，很简单！！

• 通常配置left,top,right,bottom的值即可调整图表的位置；
• 其对应的值可以是具体像素值如left:20可以是相对于容器高宽的百分比如left:'20%'
  
  

献上代码段，如下：

grid: {
    left: "20%",
    top: "20%",
    right: "20%",
    bottom: "30%",
    containLabel: false  // 这个啥？看下面
  },

• containLabel这个属性的用途，见下图：
  
  设置containLabel: true常用于 防止标签溢出，计算距离时候会计算容器边到标签的距离，否则计算容器边缘到刻度线的距离。

3、调整图表的背景样式

如果想让自己的图表花里胡哨，来配置属性吧：

首先grid设置show: true 这是决定是否显示直角坐标系网格的开关；
然后就是样式的各种配置：

颜色可以使用 RGB 表示，比如 ‘rgb(128, 128, 128)’ ，
如果想要加上 alpha 通道，可以使用 RGBA，比如 ‘rgba(128, 128, 128, 0.5)’，
也可以使用十六进制格式，比如 ‘#ccc’

• backgroundColor 网格背景色，默认透明。
• borderColor 网格的边框颜色。
• borderWidth 网格的边框线宽。
• shadowColor 阴影颜色。
• shadowBlur 图形阴影的模糊大小。
• shadowOffsetX 阴影水平方向上的偏移距离。
• shadowOffsetY 阴影垂直方向上的偏移距离。