Tooltip，数据提示工具，用于用户将鼠标悬停在图表上时提供关于数据点的详细信息。 改配置可以在 全局、grid(坐标系)、series(系列)和series.data(系列数据)范围中进行配置。

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

       在之前的 grid 的配置中有完整提示组件配置，下面以全局配置为示例：

一、.提示组件 tooltip 配置

// 全局配置 提示组件
option={
    tooltip:{
        show:true,                // 是否显示提示组件
        trigger:'item',           // 提示组件触发类型
        // 坐标指示器配置 头
        axisPointer:{
            type:'line',          // 指示器类型
            axis:'auto',          // 指示器的坐标轴
            snap:true,            // 坐标轴指示器是否吸附到具体的数值点上
            z:1,                  // 坐标轴指示器的 z 值，图形层级
            
            // 指示器文本标签配置  头
            label:{
                show:true,                // 是否显示文本标签
                precision:2,              // 文本标签中数值的精度，当前保留两位小数点
                formatter:'{value}单位',  // 文本标签格式器，可以使用方法
                margin:10,                // 文本标签距离轴的距离
                color:'red',              // 文字颜色
                fontStyle:'normal',       // 字体的风格
                fontWeight:'normal',      // 字体粗细
                fontFamily:'serif',       // 字体系列
                fontSize:15,              // 字体大小
                lineHeight:15,            // 行高
                width:100,                // 文本显示宽度
                height:100,               // 文本显示高度
                textBorderColor:'red',    // 文字描边颜色
                textBorderWidth:20,       // 文字描边宽度
                textBorderType:'solid',   // 文字描边类型
                textBorderDashOffset:2,   // 文字描边为虚线时，虚线的偏移量
                textShadowColor:'red',    // 文字阴影
                textShadowBlur:10,        // 文字阴影长度
                textShadowOffsetX:10,     // 文字阴影水平偏移量
                textShadowOffsetY:10,     // 文字阴影竖直偏移量
                overflow:'truncate',      // 文字超出宽度是否截断或者换行
                ellipsis:'···',           // 文字超出宽度设置为 truncate 时，末尾显示内容
                padding:[5,5,5,5],        // 文本标签的内边距
                backgroundColr:'red',     // 文本标签的背景颜色
                borderColor:'red',        // 文本标签边框颜色
                borderWidth:10,           // 文本标签的边框宽度
                shadowBlur:3,             // 文本标签阴影
                shadowColor:'red',        // 文本标签阴影颜色
                shadowOffsetX:10,         // 文本标签阴影水平偏移量
                shadowOffsetY:10,         // 文本标签阴影竖直偏移量                         
            },
            // 指示器文本标签配置  尾
            
            // 直线指示器的样式, type 为 line 生效， 头 
            lineStyle:{                   
                color:'red',              // 线的颜色
                width:2,                  // 线的宽度
                type:'solid',             // 线的类型
                dashOffset:10,            // 线的类型为虚线时，虚线的偏移量
                cap:'butt',               // 线段末端形状
                join:'bevel',             // 两个线段连接部分的形状
                miterLimit:10,            // join 为 miter 时,斜接面比例
                shadowBlur:10,            // 线的阴影
                shadowColor:'red',        // 线的阴影颜色
                shadowOffsetX:10,         // 阴影水平偏移量
                shadowOffsetY:10,         // 阴影竖直偏移量
                opacity:0.8,              // 线的透明度              
            },
            // 直线指示器的样式, type 为 line 生效， 尾 
            
            // 阴影指示器图形样式, type 为 shadow 生效， 头         
            shadowStyle:{
                color:'red',              // 图形填充颜色
                shadowBlur:10,            // 图形阴影大小
                shadowColor:'red',        // 图形阴影颜色
                shadowOffsetX:'red',      // 图形阴影水平偏移量
                shadowOffsetY:'red',      // 图形阴影竖直偏移量
                opacity:0.8,              // 图形透明度                  
            },  
            // 阴影指示器图形样式, type 为 shadow 生效， 尾       
            
            // 十字准星指示器样式,type 为 cross 生效，头
            crossStyle:{
                color:'red',              // 线的颜色
                width:2,                  // 线的宽度
                type:'dashed',            // 线的类型
                dashOffset:10,            // 线的类型为虚线时，虚线的偏移量
                cap:'butt',               // 指定线段末端的图形
                join:'bevel',             // 两个线段连接处的形状
                miterLimit:10,            // join 为 miter 时，斜接面比例
                shadowBlur:10,            // 线的阴影程度
                shadowColor:'red',        // 线的阴影颜色
                shadowOffsetX:10,         // 线阴影的水平偏移量
                shadowOffsetY:10,         // 线阴影的竖直偏移量
                opacity:0.8,              // 线的透明度            
            }
            // 十字准星指示器样式,type 为 cross 生效 尾
            animation:true,                 // 是否开启动画
            animationThreshold:100,         // 动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。
            animationDuration:100,          // 初始动画时长
            animationEasing:'cubicIn',      // 初始动画的缓动效果
            animationDelay:100,             // 初始动画的延迟
            animationDurationUpdate:200,    // 数据更新动画时长
            animationEasingUpdate:'linear', // 数据更新缓动效果
            animationDelayUpdate:100,       // 数据更新动画延迟
         }   
        // 坐标指示器配置 尾
        
        showContent:true,                   // 是否显示提示框浮层
        alwaysShowContent:true,             // 是否一直显示提示框内容
        triggerOn:'click',                  // 提示框触发的条件
        showDelay:100,                      // 浮层显示的延迟时间
        hideDelay:100,                      // 浮层隐藏的延迟
        enterable:true,                     // 鼠标是否可以进入提示框浮层中
        renderMode:'html',                  // 浮层渲染模式
        confine:true,                       // 将 tooltip 框限制在图表区域内
        appendToBody:true,                  // 是否将 tooltip 的 DOM 节点添加到 HTML 的 body 子节点上
        className:'name',                   // 指定 DOM 节点类名
        transitionDuration:2,               // 提示框浮层的移动动画过度时间，单位 S/秒
        position:'left',                    // 提示框浮层的位置，设置之后就会固定，不会跟随鼠标移动
        formatter:'{a}单位'                 // 提示框浮层内容格式器，模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。
        valueFormatter:(value) => '$' + value.toFixed(2),                  // tooltip 中数值显示部分的格式化回调函数。
        backgroundColor:'red',              // 提示框浮层的背景颜色
        borderColor:'#333',                 // 提示框浮层的边框颜色
        borderWidth:3,                      // 提示框浮层的边框宽度
        padding:[5,5,5,5],                  // 提示框浮层的内边距
        // 提示框浮层的文本样式 头
        textStyle:{
            color:'red',                       // 文字的颜色
            fontStyle:'normal',                // 字体的风格
            fontWeight:'normal',               // 字体的粗细
            fontFamily:'serif',                // 字体系列
            fontSzie:15,                       // 字体大小
            lineHeight:20,                     // 行高
            width:10,                          // 文本显示宽度
            height:100,                        // 文本显示高度
            textBorderColor:'red',             // 文字描边颜色
            textBorderWidth:10,                // 文字描边宽度
            textBorderType:'solid',            // 文字描边类型
            textBorderDashOffset:10,           // 描边类型为虚线时，虚线的偏移量
            textShadowColor:'red',             // 文字阴影颜色
            textShadowBlur:10,                 // 文字阴影长度
            textShadowOffsetX:10,              // 文字阴影水平偏移量
            textShadowOffsetY:10,              // 文字阴影竖直偏移量
            overflow:'none',                   // 文字超出宽度截断或者换行
            ellipsis:'···',                    // overflow 配置为 truncate 的时候，文本末尾显示的文本      
        } 
        // 提示框浮层的文本样式 尾
        extraCssText:'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',       // 额外附加到浮层的 css 样式。   
        order:'seriesAsc',                                            // 多系列提示框浮层排列顺序。   
    }
}

二、解剖图

三、 解剖图 option 配置代码

使用：

 代码：

const colors = ['#5470C6', '#EE6666','green'];
option = {
  color: colors,
  tooltip: {
    show:true,
    trigger: 'axis',
    axisPointer: {
          // 全局配置 十字准星指示器
      type: 'cross'
    }
  },
  xAxis: [
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      // 线的样式配置
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[2]
        }
      },
      // 将该 X 轴绑定到第二个画布
      gridIndex:1,
      //单独配置第三个 X 轴的提示器样式
      axisPointer: {
        type: 'shadow',
        label: {
           // 自定义 标签显示的内容
          formatter: function (params) {
            return (
              '系列三' +
              params.value +
              (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            );
          },
        },
        shadowStyle:{
          color:'green',
          opacity:0.2,
        },
      },
      data: ['2017-1', '2017-2', '2017-3', '2017-4', '2017-5', '2017-6', '2017-7', '2017-8', '2017-9', '2017-10', '2017-11', '2017-12']
    },
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[1]
        }
      },
      // 单独配置第二个 X 轴的提示器样式
      axisPointer: {
           show:true,
        label: {
          formatter: function (params) {
            return (
              '系列二' +
              params.value +
              (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            );
          },
          margin:30,
        },
      },
      data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
    },
    {
      type: 'category',
      axisTick: {
        alignWithLabel: true
      },
      axisLine: {
        onZero: false,
        lineStyle: {
          color: colors[0]
        }
      },

      // 单独配置第三个 X 轴的提示器样式
      axisPointer: {
     
        label: {
          formatter: function (params) {
            return (
              '系列一' +
              params.value +
              (params.seriesData.length ? '：' + params.seriesData[0].data : '')
            );
          }
        }
      },
      data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
    },
  ],
    legend: {},
  grid:[{
    width:'45%',
    height:'50%',
    top: '25%',
    left:'3%'
  },{
    width:'45%',
    height:'50%',
    top: '25%',
    left:'55%'
  }
    ],

 // y 轴未配置
  yAxis: [
     {
      type: 'value',
      gridIndex:1,
    },
     {
      type: 'value',
      
    },
     {
      type: 'value',

    },
  ],
  series: [
    {
      name: '系列一2015',
      type: 'line',
      // 该系列绑定在 第三个 X 轴上来绘制
      xAxisIndex: 2,
      yAxisIndex:2,
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    },
    {
      name: '系列二2016',
      type: 'line',
      // 该系列绑定在 第二个 X 轴上来绘制
      xAxisIndex: 1,
      yAxisIndex:1,
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      data: [
        3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
      ]
    },
    {
      name: '系列三2017',
      type: 'line',
      smooth: true,
       // 该系列绑定在 第一个 X 轴上来绘制
      xAxisIndex:0,
      yAxisIndex:0,
      emphasis: {
        focus: 'series'
      },
      data: [
        15.2,26.8,32.2,42.3,55.6,89.6,196,192,126,66.5,42.3,26.8
      ]
    }
  ]
};