九、Echart图表 之 grid组件用法 直角坐标系内绘图网格

🍓 作者主页：💖仙女不下凡💖

🍓 前言介绍：以下👇内容是我个人对于该技术的总结，如有不足与错误敬请指正！

🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章Echart的相关文章欢迎持续关注！

---

✨grid主要是控制Echart图表的整体布局，以top，bottom为例如下图，剩下的其他参数就是给红色框里面的网状格编辑样式的，这样理解起来就是方便多了。这个组件属性很少使用别的属性，一般情况 上下左右 就够用了。

• grid.tooltip： 本坐标系特定的 tooltip 设定。具体配置项可以参考全局tooltip文章
  提示框组件可以设置在多种地方：
  可以设置在全局，即 tooltip
  可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
  可以设置在系列中，即 series.tooltip
  可以设置在系列的每个数据项中，即 series.data.tooltip

✨ grid属性大全

/配置项里面有值的都是指默认值/
grid: {
  id: '', //组件 ID。默认不指定,当一个区域里面多个图的时候可以设置
  show: false, // 是否显示直角坐标系网格。默认false
  zlevel: 0,  // 所有图形的 zlevel 值
  z: 2, // 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低
  left: '10%', // grid组件离容器左侧的距离。默认10%
  top: 60, // grid组件离容器上侧的距离。默认60px
  right: '10%', // 组件离容器右侧的距离
  bottom: 60, // 组件离容器下侧的距离
  width: 'auto', // 组件的宽度。默认自适应
  height: 'auto' // 组件的高度。默认自适应。
  containLabel: false, // 是否包含坐标轴的刻度标签
  backgroundColor: 'transparent', // 网格背景色
  borderColor: '#ccc', // 网格的边框颜色
  borderWidth: 1, // 网格的边框线宽。
  shadowBlur: '', //图形阴影的模糊大小, 该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果
  shadowColor: '', // 阴影颜色。支持的格式同color。
  shadowOffsetX: 0, // 阴影水平方向上的偏移距离。
  shadowOffsetY: 0, // 阴影垂直方向上的偏移距离。
  tooltip: {} // 同组件tooltip一样配置，参考下面文章即可，我就不展开了没有意义，用的也比较少
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

---

👉推荐相关文章：Echart图表 之 基本使用及配置项

👉推荐相关文章：Echart图表 之 title配置项大全

👉推荐相关文章：Echart图表 之 颜色color配置项大全

👉推荐相关文章：Echart图表 之 X轴（xAxis）与 Y轴（yAxis）配置项大全

👉推荐相关文章：Echart图表 之 legend图例组件配置项大全

👉推荐相关文章：Echart图表 之 tooltip提示框组件配置项大全

👉推荐相关文章：Echart图表 之 toolbox工具栏组件配置项大全

👉推荐相关文章：Echart图表 之 series盒须图（箱体图）基本使用与配置大全