🍓 作者主页:💖仙女不下凡💖
🍓 前言介绍:以下👇内容是我个人对于该技术的总结,如有不足与错误敬请指正!
🍓 欢迎点赞👍 收藏⭐ 留言📝 相关账号会持续发布关于文章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一样配置,参考下面文章即可,我就不展开了没有意义,用的也比较少
}
👉推荐相关文章:Echart图表 之 基本使用及配置项
👉推荐相关文章:Echart图表 之 title配置项大全
👉推荐相关文章:Echart图表 之 颜色color配置项大全
👉推荐相关文章:Echart图表 之 X轴(xAxis)与 Y轴(yAxis)配置项大全
👉推荐相关文章:Echart图表 之 legend图例组件配置项大全
👉推荐相关文章:Echart图表 之 tooltip提示框组件配置项大全
👉推荐相关文章:Echart图表 之 toolbox工具栏组件配置项大全