gird (网格)介绍：

        用于定义图表绘制区域的组件之一，用来确定在Echarts容器的坐标系区域内，每个图形的位置、大小以及刻度发布，使每一个图表中都能够定义多个网格，每个网格用于独立的坐标系，并通过 x、y、width、height、等属性来控制网格位置和大小，并均匀或者按照自己开发的要求，实现出但图表，多个图形不同位置展示问题。

注意事项：

①定义画布颜色时 backgroundColor ，必须要在 grid 中设置 show:true, 才生效。

讯享网

一、图例的 option   属性配置

// 网格 grid option={ // 单系列图表就 直接写成 grid:{} ,多个就可以写成 grid:[{},{},{}] grid:[ { id:'1', //组件ID show:true, //是否显示坐标系网格 zlevel:1, //所有图形的 层级大小 z:2, //该组件中所有图形的z值 left:'10%', //网格距离容器左侧的距离 right:'10%', //网格距离容器右侧的距离 top:'10%', //网格距离容器顶部的距离 botto:'10%', //网格距离容器底部的距离 width:'auto', //网格宽度 height:'auto', //网格高度 containLabel:true, //网格区域是否将坐标轴的刻度标签容纳在内，并一起定位，防止标签溢出 backgroundColor: "rgba(156, 29, 29, 1)", //网格的背景颜色 borderWidth:2, //网格边框线宽 borderColor:"rgba(156, 29, 29, 1)", //网格的边框颜色 shadowColor:"rgba(156, 29, 29, 1)", //网格的阴影颜色 shadowBlur: 7, //网格的阴影程度 shadowOffsetX:10, //阴影在水平方向上的偏移量 shadowOffsetY:10, //阴影在竖直方向上的偏移量 // 在本坐标系特定的 tooltip tooltip:{ show:true, // 是否显示提示组件 trigger:'item', // 触发类型 //坐标指示器配置项 axisPointer:{ type:"line", //指示器类型 axis:'auto', //指示器的坐标轴 snap:true, //指示器是否自动吸附到点上 z:1, //指示器的 z 值 animation:true, //是否开启动画 animationThreshold:2000, //动画的阈值，单个系列显示的图形数量大于这个阈值时会关闭动画。 animationDuration:1000, //初始动画的时长 animationEasing:'cubicOut', //初始动画的缓动效果 animationDelay:2000, //初始动画的延迟 animationDurationUpdate:1000, //数据更新动画的时长 animationEasingUpdate:200, //数据更新动画的缓动效果 animationDelayUpdate:200, //数据更新动画的延迟 //指示器文本标签样式(文本容器样式) label:{ show:true, // 是否显示文本标签 // 以下内容需要在 show 设置为 true 才生效 precision:'auto', //显示文本值的小数点 formatter:"显示文字", //文本标签显示设置，可写方法 margin:3, //label 距离轴的距离 color: "rgba(234, 21, 21, 1)", //文字颜色 fontStyle:'normal', //字体风格 fontWeight:'normal', //字体粗细 fontFamily:'sans-serif', //文字字体 fontSize:15, //字体大小 lineHeigh:10, //行高 width:10, //文字显示宽度 height:10, //文字显示高度 textBorderColor:'red', //文本描边颜色 textBorderWidth:10, //文本描边宽度 textBorderType:'solid', //描边类型 textBorderDashOffset:10, //描边为虚线时的偏移量 textShadowColor:'transparent', //文字阴影颜色 textShadowBlur:10, //文字阴影长度 textShadowOffsetX:10, //文字阴影水平偏移量 textShadowOffsetY:10, //文字阴影竖直偏移量 overflow:'none', //文字超出是否截断 ellipsis:'···', //文字截断时末尾显示内容 padding:[5,5,5,5], //文本标签内边距 backgroundColor:'auto', //文本标签的背景颜色 borderColor:'red', //文本标签的边框颜色 borderWidth:20, //文本标签的边框宽度 shadowBlur:20, //文本标签阴影大小 shadowColor:'red', //阴影颜色 shadowOffsetX:20, //文本标签的阴影水平偏移 shadowOffsetY:20, //文本标签的阴影竖直偏移 } // 指示器 竖直 标记线的样式 lineStyle:{ color:'red', //线的颜色。 width:10, //线宽 type:10, //线的类型 dashOffset:10, //虚线的偏移量 cap:'butt', //线段末端的形状 join:'bevel', //线段相连部分形状 miterLimit:10, // join 为 miter 设置斜接面限制比例 shadowBlur:10, //线的阴影大小 shadowColor:'red', //线的阴影颜色 shadowOffsetX:20, //阴影水平偏移 shadowOffsetY:20, //阴影竖直偏移 opacity:0.5, //线的透明度 } // 指示器 水平 标记线的样式 crossStyle:{ // 配置和上面的一样 } // 当指示器的类型 type ='shadow' 生效 阴影指示器 shadowStyle:{ color: "rgba(194, 91, 91, 1)", //填充颜色 shadowBlur:10, //图形的阴影模糊程度 shadowColor:10, //阴影颜色 shadowOffsetX:10, //阴影水平偏移距离 shadowOffsetY:10, //阴影水平偏移距离 opacity:0.5, //图形透明度 } }, // 提示 悬浮层的样式，仅当 trigger 设置为 item 时生效，设置为 axis 样式是由坐标轴触发 position:['50%','50%'], //提示框浮层的位置 formatter:'文字内容转化', //提示框浮层内容格式器，可写方法 valueFormatter:(value) => '$' + value.toFixed(2), //tooltip 中数值显示部分的格式化回调函数。 borderColor:'red', //提示框浮层的边框颜色 borderWidth:5, //提示框浮层的边框宽 padding:10, //提示框浮层内边距 //悬浮层内文本样式 textStyle: { // 文字文本的样式都是一样的，不一样的就是写在哪里，在此还是列举出来， color: 'red', // 颜色 fontStyle: 'normal', // 字体风格 fontWeight: 500, //或者 'noraml', // 字体粗细 fontSize: 16, // 字体大小 lineHeight: 20, // 行高 textBorderWidth: 20, // 文本描边宽度 textBorderColor: 'red', //描边颜色 textBorderType: 'solid', //描边类型 textBorderDashOffset: 20, // 虚线偏移量 textShadowBlur: 20, // 文字阴影长度 textShadowOffsetX: 20, //阴影相当于 X 轴偏移量 textShadowOffsetY: 20, //阴影相当于 Y 轴偏移量 overflow: 'truncate', //文字超出宽度如何处理 break 换行 ellipsis: '...' // 配合 overflow 截断时，展示 ··· } } } ] }

二、解剖图

 三、数据系列绑定网格，基本使用

网格换一个简单点的理解，就是在 Echarts 容器画布中，单独的定义两个小的画布区域，来实现绘图。

绑定画布区域基本使用如下：

讯享网option=[ grid:[ { ··· //网格一配置 }, { ··· //网格二配置 } ] //定义坐标轴在那个网格中 xAxis:[ { //系列一 gridIndex:0, //定义在网格一中 type:'category', ··· }, {//系列二 gridIndex:1, //定义在网格二中 type:'category', ··· } ], yAxis: [ { gridIndex:0, //定义在网格一中 type: 'value' }, { gridIndex:1, //定义在网格二中 type:'value' } ], series:[ { //定义在网格一中,第一个网格可不写 //xAxisIndex:0, //yAxisIndex:0, name:'Email' , type:'line', ··· }, { //定义在网格二中 xAxisIndex:1, yAxisIndex:1, name:'Email' , type:'line', ··· } ] ]