17- Echarts 配置系列之：单轴 singleAxis

singleAxis：

用于展示只有一个数据维度的数据。它通常用于展示时间序列数据或者数值序列数据。

对于单轴的应用和绘制，其实就相当于我们平时的直角坐标系少一个 X 或者 Y ，然后进行图形绘制。

注意：

1.在使用单轴时，请先了解以下几点基础知识：

数据轴 value： 用于展示连续的数值数据，连续的数值型数据！例如 数值

类目轴 category： 类目轴适用于展示离散的类别数据，非数值型数据！例如文本、标签等

时间轴 time：时间轴用于展示时间序列数据，时间轴上的刻度按照时间的先后顺序排列，刻度之间的间隔会自动根据时间跨度进行调整。

对数轴 log：用于展示数据的对数关系。

上面几个为 轴的基本类型，轴在使用不同的data类型时，需要将 轴的type对应上，不然轴的绘制会出现错误。

2. 我这边配置有一个属性是无效的， tooltip 中的 type 设置为 cross 十字准星指示器，配置无效，这样也使其中的 crossStyle 配置无用。首先singleAxis 为单轴，按道理来说本身图形不会存在第二轴来支持 cross 。大家配置的时候可以自己验证一下是否有效，有不同结果欢迎文章评论中讨论。

一、配置代码 

option:{
   singleAxis:{
       id:'2',                   // 组件Id
       z:2,                      // 组件绘制优先级
       zlevel:0,                 // 组件层级优先级
       left:'10%',               // 组件距离容器左侧的距离
       right:'10%',              // 组件距离容器右侧的距离
       top:'10%',                // 组件距离容器顶部的距离
       bottom:'10%',             // 组件距离容器底部的距离
       width:'auto',             // 组件宽度
       height:'auto',            // 组件高度
       orient:'vertical',        // 轴的朝向， horizontal 水平或者 vertical
       type:'category',          // 轴的类型
       name:'name',              // 轴的名称
       nameLocation:'end',       // 轴名称显示位置
       nameGap:15,               // 轴名称与轴线之间的距离
       nameRotate:90,            // 轴名称旋转的角度
       inverse:true,             // 是否反向坐标轴
       boundarGap:['10%','10%'], // 坐标轴两边的留白大小
       min:0,                    // 坐标轴刻度最小值
       max:100,                  // 坐标轴刻度最大值
       scale:true,               // 是否脱离 0 刻度值，仅在 type 为 value有效
       splitNumber:5,            // 坐标轴分割段数
       minInterval:10,           // 坐标轴最小间隔大小
       maxInterval:50,           // 坐标轴最大间隔大小
       interval:10,              // 强制设置坐标轴分段间隔
       logBase:10,               // 对数轴的底数
       silent:true,              // 坐标轴是否静态无法交互
       triggerEvent:true,        // 坐标轴标签是否响应触发鼠标事件
       animation:true,           // 是否开启动画
       animationThreshold:200,   // 是否开启动画阈值
       animationDuration:100,    // 初始动画时长
       animationEasing:100,      // 初始动画的缓动效果
       animationDelay:100,       // 初始动画的延迟
       animationDurationUpdate:1000,   // 数据更新动画的时长
       animationEasingUpdate:100,      // 数据更新动画缓动效果
       animationDelayUpdate:100,       // 数据更新动画的延迟
       
       // 坐标轴名称的样式     
       nameTextStyle:{
           color:'red',            //文字颜色
           fontStyle:'normal',     //字体风格
           fontWeight:'normal',    //字体粗细
           fontFamily:'sans-serif',//字体
           fontSize:12,            //字体大小
           align:'left',           //字体水平对齐方式
           verticalAlign:'top',    //竖直对齐方式
           lineHeight:10,          //行高
           backgroundColor:'red',  //文字块背景颜色，可以用图片
           borderColor:'red',      //文字块边框颜色
           borderWidth:5,          //文字块边框宽度
           borderType:'solid',     //文字块描边
           borderDashOffset:10,    //描边为虚线时的偏移量
           borderRadius:10,        //文字块圆角
           padding:[5,5,5,5],      //文字块内边距
           shadowColor:'red',      //文字块阴影颜色
           shadowBlur:10,          //阴影程度
           shadowOffsetX:10,       //阴影在水平方向上的偏移
           shadowOffsetY:10,       //阴影在竖直方向上的偏移
           width:50,               //文本显示宽度
           height:50,              //文本显示高低            
           textBorderColor:'red',  //文字的描边颜色
           textBorderWidth:10,     //描边宽度
           textBorderType:'solid', //描边类型
           textBorderDashOffset:10,//虚线偏移量
           textShadowColor:'red',  //文字的阴影颜色
           textShadowBlur:10,      //文字阴影长度
           textShadowOffsetX:10,   //文字阴影水平偏移量
           textShadowPffsetY:10,   //文字阴影竖直偏移量
           overflow:'none',        //文字超出宽度是否截断或者换行
           ellipsis:'···',         //文字超出截断时，末尾显示的内容  
           // 设置坐标轴名称盒子的丰富样式
           rich:{
              //这里的文字样式优先于上面的配置,同上面的 nameTextStyle包含的配置一样
               color:'red',               //字体颜色
               fontStyle: "italic",       //字体风格
               fontWeight: 'normal',      //字体粗细
               fontFamily:'sans-serif',//字体
               fontSize:12,            //字体大小
               align:'left',           //字体水平对齐方式
               verticalAlign:'top',    //竖直对齐方式
               lineHeight:10,          //行高
               //···略                                                                                                         
           },         
       },
       
       // 坐标轴刻度标签配置
       axisLabel:{
           show:true,                  // 是否显示刻度标签
           interval:1,                 // 坐标轴刻度标签的显示间隔,在类目轴中有效
           inside:false,               // 刻度标签是否朝内 
           rotate:0,                   // 刻度标签旋转角度
           margin:10,                  // 刻度标签与轴线之间的距离
           formatter:'{ared|{value}}',  // 标签内容格式器,使用下面定义的富文本样式
           showMinLabel:true,          // 是否显示最小 tick 的 label
           showMaxLabel:true,          // 是否显示最大 tick 的 label
           hideOverlap:true,           // 是否隐藏重叠标签
           color:'red',                // 标签文字颜色
           fontStyle:'normal',         // 标签文字的风格
           fontWeight:'normal',        // 标签文字粗细
           fontFamily:'serif',         // 字体的字体系列
           fontSize:15,                // 文字字体大小
           align:'center',             // 文字水平对齐方式
           verticaAlign:'top',         // 文字垂直对齐方式
           lineHeight:50,              // 行高
           backgroundColor:'red',      // 文字块背景颜色
           borderColor:'red',          // 文字块边框颜色
           borderWidth:2,              // 文字块边框宽度
           borderType:'solid',         // 文字块边框描边颜色
           borderDashOffset:0,         // 设置虚线的偏移量
           borderRadius:10,            // 文字块圆角
           padding:[5,5],              // 文字块内边距
           shadowColor:'red',          // 文字块背景阴影颜色
           shadowBlur:10,              // 文字块阴影大小
           shadowOffsetX:0,            // 文字块阴影水平偏移量
           shadowOffsetY:10,           // 文字块阴影竖直偏移量
           width:100,                  // 文本显示宽度
           height:100,                 // 文字显示高度
           textBorderColor:'red',      // 文字本身描边颜色
           textBorderWidth:4,          // 文字描边宽度
           textBorderType:'solid',     // 文字描边类型
           textBorderDashOffset:10,    // 文字描边虚线偏移量
           textShadowColor:'red',      // 文字阴影颜色
           textShadowBlur:10,          // 文字阴影长度
           textShadowOffsetX:10,       // 文字阴影水平偏移量
           textShadowOffsetY:10,       // 文字阴影竖直偏移量
           overflow:'none',            // 文字超出宽度是否截断或者换行
           ellipsis:'···',             //  overflow配置为'truncate'时,文本尾巴显示内容
           
           // 富文本设置
           rich:{
               ared:{
                   color:'red',
                   fontSize:20,               
               }           
           }
       }
       
       // 坐标轴轴线配置
       axisLine:{
           show:true,                  // 是否显示轴线
           symbol:'none',              // 轴线两边的箭头
           symbolSize:[10,15],         // 轴线两边箭头大小
           symbolOffset:[0,0],         // 轴线两边箭头的偏移
           // 线的样式
           lineStyle:{
               color:'red',            // 线的颜色
               width:2,                // 线的宽度
               type:'solid',           // 线的类型
               dashOffset:10,          // 虚线的偏移量，type为dashed虚线时生效
               cap:'butt',             // 指定线段末端的绘制图形
               join:'bevel',           // 两个线段连接图形
               miterLimit:10,          // 连接斜截面比例，只有当 join 为 miter 时，生效
               shadowBlur:10,          // 线段阴影大小
               shadowColor:'red',      // 线段阴影颜色
               shadowOffsetX:10,       // 线段阴影水平偏移量
               shadowOffsetY:10,       // 线段阴影竖直偏移量
               opacity:0.5,            // 线段透明度                          
           }                  
       },
       
       // 坐标轴刻度配置
       axisTick:{
           show:true,                   // 是否显示坐标轴刻度
           aligWithLabel:true,          // 刻度线和标签是否对齐
           interval:'auto',             // 坐标轴刻度显示间隔
           inside:true,                 // 坐标轴刻度是否朝内
           length:10,                   // 坐标轴刻度长度
           // 线的样式
           lineStyle:{
               color:'red',            // 线的颜色
               width:2,                // 线的宽度
               type:'solid',           // 线的类型
               dashOffset:10,          // 虚线的偏移量，type为dashed虚线时生效
               cap:'butt',             // 指定线段末端的绘制图形
               join:'bevel',           // 两个线段连接图形
               miterLimit:10,          // 连接斜截面比例，只有当 join 为 miter 时，生效
               shadowBlur:10,          // 线段阴影大小
               shadowColor:'red',      // 线段阴影颜色
               shadowOffsetX:10,       // 线段阴影水平偏移量
               shadowOffsetY:10,       // 线段阴影竖直偏移量
               opacity:0.5,            // 线段透明度             
           },
       },
       
       // 次刻度线的配置
       minorTick:{
           show:true,                  // 是否显示次刻度线
           splitNumber:5,              // 次刻度线分割数
           length:10,                  // 次刻度线的长度
           // 线的样式
           lineStyle:{
               color:'red',            // 线的颜色
               width:2,                // 线的宽度
               type:'solid',           // 线的类型
               dashOffset:10,          // 虚线的偏移量，type为dashed虚线时生效
               cap:'butt',             // 指定线段末端的绘制图形
               join:'bevel',           // 两个线段连接图形
               miterLimit:10,          // 连接斜截面比例，只有当 join 为 miter 时，生效
               shadowBlur:10,          // 线段阴影大小
               shadowColor:'red',      // 线段阴影颜色
               shadowOffsetX:10,       // 线段阴影水平偏移量
               shadowOffsetY:10,       // 线段阴影竖直偏移量
               opacity:0.5,            // 线段透明度       
           }                        
       },
       
      
       
       // 坐标轴分割线配置
       splitLine:{
           show:true,                   // 是否显示分割线
           interval:1                   // 分割线显示间隔数
           // 线的样式
           lineStyle:{
               color:'red',            // 线的颜色
               width:2,                // 线的宽度
               type:'solid',           // 线的类型
               dashOffset:10,          // 虚线的偏移量，type为dashed虚线时生效
               cap:'butt',             // 指定线段末端的绘制图形
               join:'bevel',           // 两个线段连接图形
               miterLimit:10,          // 连接斜截面比例，只有当 join 为 miter 时，生效
               shadowBlur:10,          // 线段阴影大小
               shadowColor:'red',      // 线段阴影颜色
               shadowOffsetX:10,       // 线段阴影水平偏移量
               shadowOffsetY:10,       // 线段阴影竖直偏移量
               opacity:0.5,            // 线段透明度       
           },        
       },
       // 坐标轴次分割线
       minorSplitLine:{
           show:true,                   // 是否显示分割线
           // 次分割线的样式
           lineStyle:{
               color:'red',            // 线的颜色
               width:2,                // 线的宽度
               type:'solid',           // 线的类型
               dashOffset:10,          // 虚线的偏移量，type为dashed虚线时生效
               cap:'butt',             // 指定线段末端的绘制图形
               join:'bevel',           // 两个线段连接图形
               miterLimit:10,          // 连接斜截面比例，只有当 join 为 miter 时，生效
               shadowBlur:10,          // 线段阴影大小
               shadowColor:'red',      // 线段阴影颜色
               shadowOffsetX:10,       // 线段阴影水平偏移量
               shadowOffsetY:10,       // 线段阴影竖直偏移量
               opacity:0.5,            // 线段透明度       
           },       
       },
       
       // 分割区配置
       splitArea:{
           interval:'auto',
           show:false,
           // 区域样式
           areaStyle:{
               color:['red','#fff','#999'],         // 分割区颜色，设置多个时，会按照你的颜色依次循环填充
               shadowBlur:20,                       // 分割区阴影大小
               shadowColor:'red',                   // 分割区阴影颜色
               shadowOffsetX:10,                    // 分割区阴影水平偏移量
               shadowOffsetY:10,                    // 分割区阴影竖直偏移量
               opacity:1,                           // 分割区透明度                          
           }     
       },
       
       // 类目数据
       data:[                                        // 设置 data后，默认 singleAxis.type 为  category，若不设置 data，则默认从 server.data 获取
       
       // 刻度一
       {
           value:'周一',
           // 单独配置刻度标签的样式
           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 截断时，展示 ···     
           },      
       }, 
       // 刻度二 
       {
           value:'周二',
           textStyle:{ ···· }                  
       },
       ····                                     
       ],
       
       // data 简单配置
       data:['周一','周二','周三','周四'], 
       
       // 坐标轴指示器
       axisPointer:{
           show:false,           // 是否显示径向的指示器
           type:'line',          // 径向指示器类型
           snap:true,            // 指示器是否吸附到点上
           z:1,                  // 指示器的 z 值
           animation:true,                  //是否开启动画
           animationThreshold:2000,         //动画的阈值，单个系列显示的图形数量大于这个阈值时会关闭动画。
           animationDuration:1000,          //初始动画的时长
           animationEasing:'cubicOut',      //初始动画的缓动效果
           animationDelay:2000,             //初始动画的延迟
           animationDurationUpdate:1000,    //数据更新动画的时长
           animationEasingUpdate:200,       //数据更新动画的缓动效果
           animationDelayUpdate:200,        //数据更新动画的延迟           
           triggerEmphasis:true,            //是否触发强调功能
           triggerTooltip:true,             //是否触发 tooltip
           value:10,                        // axisPointer 的初始位置
           status:'show',                   //当前状态 
           //指示器文本标签
           label:{
               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,                    //线的透明度               
           },
           // 当指示器的类型 type ='shadow' 生效 阴影指示器
           shadowStyle:{
               color: "rgba(194, 91, 91, 1)",   //填充颜色
               shadowBlur:10,                   //图形的阴影模糊程度
               shadowColor:10,                  //阴影颜色    
               shadowOffsetX:10,                //阴影水平偏移距离 
               shadowOffsetY:10,                //阴影水平偏移距离
               opacity:0.5,                     //图形透明度                
           },

           //控制手柄配置
           handle:{
               show:true,                       //是否显示手柄
               icon:'image://图片URL',          //手柄图标
               size:45,                         //手柄尺寸
               margin:50,                       //手柄中心与轴的距离
               color:'red',                     //手柄颜色
               throttle:40,                     //视图更新周期
               shadowBlur:4,                    //图形阴影大小
               shadowColor:'red',               //阴影颜色
               shadowOffsetX:2,                 //阴影在水平方向上的偏移
               shadowOffsetY:2,                 //阴影在垂直方向上的偏移        
           },     
       },
       // 单轴的提示组件配置
       tooltip:{
           show:true,                            // 是否显示提示组件
           trigger:'item',                       // 触发类型
           position:['50%','50%'],               // 提示悬浮框的位置
           formatter:'{b}',                      // 内容格式器
           valueFormatter:(value) => '$' + value,// 数值显示部分的格式化回调函数。
           backgroundColor:'red',                // 提示悬浮框的背景颜色
           borderColor:'#333',                   // 悬浮框边框颜色      
           borderWidth:2,                        // 悬浮框边框宽度
           padding: [5,5],                       // 悬浮框内边距
           extraCssText:"css",                   // 而外添加的css样式
           
           //坐标轴指示器配置
           axisPointer{
               // 与上面的 axisPointer 坐标轴指示器一模一样。         
           },
           
       }
 
       
   } 
}

二、解剖图

 三、配置实例代码

使用：

代码：

option = {
    tooltip: {},

  singleAxis:[
    // 第一个 单轴的基本使用
  {
    width:'88%',
    height:'40%',
    left:'center',
    name:'时间',
    type:'category',
    // 轴指示器
    axisPointer:{
        show:true,
        handle:{
          show:true,
        margin:70,
          size:35,
          icon:'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
        },
        label:{
          fontSize:12,
          margin:20,
        },
          lineStyle: {
        color: 'rgba(0,0,0,0.2)',
        width: 2,
        type: 'solid'
      },
      },
      // 类目轴
      data:[
      {
        value:'2022-01-01',
        textStyle:{
          fontSize:14,
          color:'red'
        },
      },
      '2022-01-02',
     {
       value: '2022-01-03',
         textStyle:{
          fontSize:14,
          color:'red'
        },
     },
      '2022-01-04',
      '2022-01-05',
      '2022-01-06',
      '2022-01-07',
      '2022-01-08'
    ],
    // 分割线
    splitLine:{
      show:true,
      lineStyle:{
        width:2,
        color:'#333',
      }
    },
    // 分割区配置
    splitArea:{
      show:true,
    },
    
  },
 
  // 第二个 单轴的河流图
  {
      width:'90%',
      height:'30%',
      bottom:'5%',
      type:'time',
       axisLabel:{
        show:true,
        formatter:'{yyyy}-{MM}-{dd}'
      },
  }
  ],

  series: [
    {
      type: 'scatter',
      // 显示各点值
      label:{
        show:true,
        formatter:'{c}'
      },
      // 根据 data 数值来配置点的大小
      symbolSize: (value, params) => [value,value],
      data: [10,20,15,30,45,65,18,20],
      coordinateSystem: 'singleAxis'
    },

    // 海流图 
     {
      singleAxisIndex:1,
      coordinateSystem: 'singleAxis',
      type: 'themeRiver',
     
      data: [
        ['2015/11/08', 10, 'DQ'],
        ['2015/11/09', 15, 'DQ'],
        ['2015/11/10', 35, 'DQ'],
        ['2015/11/11', 38, 'DQ'],
        ['2015/11/12', 22, 'DQ'],
        ['2015/11/08', 35, 'TY'],
        ['2015/11/09', 36, 'TY'],
        ['2015/11/10', 37, 'TY'],
        ['2015/11/11', 22, 'TY'],
        ['2015/11/12', 24, 'TY'],
     
        ['2015/11/08', 21, 'SS'],
        ['2015/11/09', 25, 'SS'],
        ['2015/11/10', 27, 'SS'],
        ['2015/11/11', 23, 'SS'],
        ['2015/11/12', 24, 'SS'],

        ['2015/11/08', 10, 'QG'],
        ['2015/11/09', 15, 'QG'],
        ['2015/11/10', 35, 'QG'],
        ['2015/11/11', 38, 'QG'],
        ['2015/11/12', 22, 'QG'],

        ['2015/11/08', 18, 'SY'],
        ['2015/11/09', 15, 'SY'],
        ['2015/11/10', 35, 'SY'],
        ['2015/11/11', 38, 'SY'],
        ['2015/11/12', 22, 'SY'],

        ['2015/11/08', 10, 'DD'],
        ['2015/11/09', 15, 'DD'],
        ['2015/11/10', 35, 'DD'],
        ['2015/11/11', 38, 'DD'],
        ['2015/11/12', 22, 'DD'],

      ]
    }
  ]
};