11-Echarts 配置系列之：坐标轴指示器 axisPointer

坐标轴指示器是指示坐标轴当前刻度的工具。

在之前的 tooltip、xAxis(yAxis)、 grid 配置系列中，都包含着 axisPointer 的设置，大家也可以看到其中的显示效果，在此也有对应的配置优先级，其中关系大致如下：

1. 单独配置的 axisPointer 优先级 永远 高于 在 tooltip 中配置的优先级。
2. 没有条件一的影响下，层级越深，优先级越高

基本使用：鼠标悬浮到图上，可以出现标线和刻度文本。

文章最后的配置代码为 解剖图的示例代码

一、坐标轴指示器 axisPointer 配置代码

option={
    //  全局配置坐标轴指示器
    axisPointer：{
        id:1,                     //  组件ID
        show:true,                //  是否显示组件
        type:'line',              //  指示器类型 line 、shadow 、none
        snap:true,                //  是否吸附到店上
        z:1,                      //  坐标轴指示器的 z 值
        status:'show',            // 初始指示器的状态， show 显示， hide 隐藏 
        value:5000,               // 当前指示器初始的 Vlaue 值   
        triggerOn:'mousemove',    // 坐标轴指示器触发条件，鼠标移动还是点击
        // 坐标轴指示器文本标签 头
        label:{
              show:true,              // 是否显示文本标签
              precision:2,            // 文本中数值的精准度，保留两位小数
              formatter:'{value}数值',//  文本标签文字的格式化器
              margin:5,               // label 距离轴的距离
              color:'red',            // 文字的颜色
              fontStyle:'normal',     // 字体的风格
              fontWeight:400,         // 字体粗细
              fontFamily:'serif',     // 字体系列
              fontSize:15,            // 字体大小
              lineHeight:50,          // 字体行高
              width:200,              // 文本显示宽度
              height:300,             // 文本显示高度
              textBorderColor:'red',      // 文字描边颜色
              textBorderWidth:50,         // 文字描边宽度
              textBorderType:'solid',     // 文字描边类型
              textBorderDashOffset:15,    // 文字描边类型为虚线时，虚线的偏移量
              textShadowColor:'red',      // 文字阴影颜色
              textShadowBlur:10,          // 文字阴影长度
              textShadowOffsetX:10,       // 文字阴影水平偏移量
              textShadowOffsetY:10,       // 文字阴影竖直偏移量
              overflow:'break',           // 文本超出宽度是否截断或者换行
              ellipsis:'···',             // 文本超出截断后，文本显示的内容
              padding:[5,5,5,5],          // 文本标签内边距
              backgroundColor:'red',      // 文本标签的背景颜色
              borderColor:'red',          // 文本标签的边框颜色
              borderWidth:5,              // 文本标签的边框宽度
              shadowBlur:4,               // 标签阴影大小
              shadowColor:'red',          // 标签阴影颜色
              shadowOffsetX:10,           // 标签阴影水平偏移量
              shadowOffsetY:10,           // 标签阴影竖直偏移量
              
        },
        // 坐标轴指示器文本标签 尾
        
        // 指示器-线的样式 头
        lineStyle:{
            color:'red',                  // 线的颜色
            width:10,                     // 线的宽度
            type:'solid',                 // 线的类型
            dashOffset:10,                // 线类型为虚线时，虚线的偏移量
            cap:'butt',                   // 线段末端的形状
            join:'bevel',                 // 两个线段之间相连部分的形状
            miterLimit:10,                // join 为 miter 时,斜接面的比例
            shadowBlur:10,                // 线的阴影长度
            shadowColor:'red',            // 线的阴影颜色
            shadowOffsetX:10,             // 线阴影水平偏移量
            shadowOffsetY:10,             // 线阴影竖直偏移量
            opacity:0.8,                  // 线的透明度  
        },
        // 直线指示器的样式 尾
        
        // 阴影指示器的样式 头
        shadowStyle:{
            color:'red',                  // 图形填充颜色
            shadowBlur:10,                // 图形阴影长度
            shadowColor:'red',            // 图形阴影颜色
            shadowOffsetX:10,             // 图形阴影水平偏移量
            shadowOffsetY:10,             // 图形阴影竖直偏移量
            opacity:0.8,                  // 图形透明度                 
        },
        // 阴影指示器的样式 尾
        
        triggerEmphasis:true,             // 是否触发系列强调功能,对应的数据是否高亮
        triggerTooltip:true,              // 是否触发 tooltip
       
        // 拖拽手柄样式 头
        handle:{
            show:true,                        // 是否一直显示手柄
            icon:'pin',                       // 这个配置似乎有问题，配置之后手柄就消失
            size:20,                          // 手柄大小
            margin:50,                        // 手柄与轴的距离
            color:'red',                      // 手柄颜色
            throttle:50,                      // 手柄拖拽时触发视图的更新周期
            shadowBlur:5,                     // 手柄阴影大小
            shadowColor:'red',                // 手柄阴影颜色   
            shadowOffsetX:10,                 // 手柄阴影水平偏移量
            shadowOffsetY:10,                 // 手柄阴影竖直偏移量  
        },
        // 拖拽手柄样式 尾

        // 在一个 Echartsr 容器中，关联不同图形中坐标轴指示器，同时触发
        link:[
            {
                   xAxisIndex:[1,2,3],        // 同时触发图形中 xAxisIndex 为 0、3、4 的 X 坐标轴指示器
                   yAxisName:'all',           // 同时触发所有图形的 Y 坐标轴指示器     
            },        
        ],

    },

};

二、解剖图

 三、解剖图 option 配置代码

使用：

 代码：

option = {
  title: {
    text: 'World Population'
  },
  legend: {},
  grid: {
    left: '10%',
    right: '4%',
    width:'80%',
    height:'80%',
    containLabel: true
  },
  axisPointer:{
      show:true,
      label:{
        formatter:'{value}数据',
      },
      value:520000,
      status:'show',
      handle:{
        show:true,
      },
      lineStyle:{
        color:'red',
        cap:'round',
        width:4,

      },
      triggerEmphasis:true,
      triggerOn:'mousemove',
     
    },
  xAxis: [{
    type: 'value',
    boundaryGap: [0, 0.01],
  },
  {
    type: 'value',
    boundaryGap: [0, 0.01],
    axisPointer:{
      show:true,
      label:{
        formatter:'{value}数据',
      },
    }
  }],
  yAxis: {
    type: 'category',
    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
    axisPointer:{
     show:true,
     handle:{
       margin:100,
     }
    }
  },
  series: [
    {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    },
    {
      name: '2012',
      type: 'bar',
      data: [19325, 23438, 31000, 121594, 134141, 681807]
    }
  ]
};