echarts使x轴标签显示tooltip

在基于Vue和Echarts的项目中需要X轴标签存在长度过长需要部分隐藏的情况，此时就需要当鼠标移到标签上时显示全部标签内容，官方的tooltip不能直接支持该需求。经过查询官方文档和博客echarts让X轴标签和x轴的pointer都显示tooltip，对博客内容适当修改，得到符合本人要求的tooltip。

首先需要开启X轴的触发开关，xAxis.triggerEvent设置为true。

xAxis.triggerEvent boolean
[ default: false ]
坐标轴的标签是否响应和触发鼠标事件，默认不响应。

事件参数如下：

{
    // 组件类型，xAxis, yAxis, radiusAxis, angleAxis
    // 对应组件类型都会有一个属性表示组件的 index，例如 xAxis 就是 xAxisIndex
    componentType: string,
    // 未格式化过的刻度值, 点击刻度标签有效
    value: '',
    // 坐标轴名称, 点击坐标轴名称有效
    name: ''
}

tootip的设置，只为tooltip设置了格式化函数，直接返回鼠标进入时获取到的坐标轴标签值。

tooltip: {formatter: this.formateTooltip}

//xLabel是组件的一个属性，用来存储当前鼠标进入的X轴标签的值
formateTooltip (params) {
  return this.xLabel
}

开启后，可以为xAxis添加事件，这里是用到'mouseover'和'mouseout'事件，具体见代码。方法的params值参考Echarts官方文档。为了解决tooltip会秒消失的问题，这里在鼠标进入时，设置tooltip的alwaysShowContent为true使其始终显示，在鼠标移出以后将alwaysShowContent为false，隐藏tooltip，同时将xLabel置为空字符串，避免在鼠标进入图形区域时触发tooltip。

this.myChart.on('mouseover', this.xAxisOver)
this.myChart.on('mouseout', this.xAxisout)

xAxisOver (params) {
  //因为进入柱形图区域也会触发事件，需要对参数的值判断，只响应坐标轴触发事件
  if (params.componentType === 'xAxis') {
    //保存标签值
    this.xLabel = params.value
    let offsetX = params.event.offsetX + 10
    let offsetY = params.event.offsetY + 10
    this.myChart.setOption({tooltip: {
      formatter: this.formateTooltip,
      alwaysShowContent: true
    }})
    //显示提示框
    this.myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: 0,
      position: [offsetX, offsetY]
    })
  }
},
xAxisout (params) {
  if (params.componentType === 'xAxis') {
    this.xLabel = ''
    this.myChart.setOption({tooltip: {
      formatter: this.formateTooltip,
      alwaysShowContent: false
    }})
  }
}

最后是实际效果。

在使用中发现一个小问题，当在一个组件中同时使用Echarts的tooltip和element-ui的el-popover组件时，el-popover会失效，估计是存在冲突，是因为el-popover标签被图表覆盖了，为el-popover所在的div添加一个z-index即得到解决。

最后最后，放一下示例组件的完整代码。

<template>
  <div id="chart" class="chart"></div>
</template>
<script>
const echarts = require('echarts')
export default {
  name:'XaxisTooltip',
  data(){
    return {
      myChart:null,
      xLabel: ''
    }
  },
  mounted(){
    this.myChart=echarts.init(document.getElementById('chart'))
    this.myChart.on('mouseover', this.xAxisOver)
    this.myChart.on('mouseout', this.xAxisout)
    this.myChart.setOption({
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {formatter: this.formateTooltip},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
            triggerEvent: true
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    })
  },
  methods:{
    formateTooltip (params) {
      return this.xLabel
    },
    xAxisOver (params) {
      if (params.componentType === 'xAxis') {
        this.xLabel = params.value
        let offsetX = params.event.offsetX + 10
        let offsetY = params.event.offsetY + 10
        this.myChart.setOption({tooltip: {
          formatter: this.formateTooltip,
          alwaysShowContent: true
        }})
        this.myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: 0,
          position: [offsetX, offsetY]
        })
      }
    },
    xAxisout (params) {
      if (params.componentType === 'xAxis') {
        this.xLabel = ''
        this.myChart.setOption({tooltip: {
          formatter: this.formateTooltip,
          alwaysShowContent: false
        }})
      }
    }
  }
}
</script>
<style scoped>
.chart{
  width: 800px;
  height: 600px;
}
</style>

补充一个可以直接在echarts官方例子中运行的示例

option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {formatter: this.formateTooltip},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
            triggerEvent: true
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    myChart.on('mouseover', (params)=> {
      if (params.componentType === 'xAxis') {
        xLabel = params.value
        let offsetX = params.event.offsetX + 10
        let offsetY = params.event.offsetY + 10
        myChart.setOption({tooltip: {
          formatter: formateTooltip,
          alwaysShowContent: true
        }})
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: 0,
          position: [offsetX, offsetY]
        })
      }
    })
    myChart.on('mouseout', (params)=> {
      if (params.componentType === 'xAxis') {
        xLabel = ''
        myChart.setOption({tooltip: {
          formatter: formateTooltip,
          alwaysShowContent: false
        }})
      }
    })
    var xLabel=''
    function formateTooltip (params) {
      return xLabel
    }

再次更新，完善showTip逻辑，使得图标的tooltip也可以显示

option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
            triggerEvent: true
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    myChart.on('mouseover', (params)=> {
      if (params.componentType === 'xAxis') {
        xLabel = params.value
        let offsetX = params.event.offsetX + 10
        let offsetY = params.event.offsetY + 10
        myChart.setOption({tooltip: {
          formatter: formateTooltip,
          alwaysShowContent: true
        }})
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: 0,
          position: [offsetX, offsetY]
        })
      } else if(params.componentType === 'series'){
          myChart.setOption({tooltip: {
            formatter: null,
            alwaysShowContent: true
          }})
          myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: params.seriesIndex,
          dataIndex: params.dataIndex
        })
      }
    })
    myChart.on('mouseout', (params)=> {
      myChart.setOption({tooltip: {
         alwaysShowContent: false
      }})
      if (params.componentType === 'xAxis') {
        xLabel = ''
      }
    })
    var xLabel=''
    function formateTooltip (params) {
      return xLabel
    }