03-Echarts简化系列之：网格 gird

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',    
             ···    
         }      
     ]
]