echart 柱状图x轴悬浮显示文字

两种方法： 1.自带属性，自带样式 ； 2. 自定义样式

   renderBarChart () {
      // let that = this
      const barChart = echarts.init(document.getElementById('bar-chart'))
      const barOptions = {
        title: {
          // text: this.selectEchartData.label.length > 32 ? this.selectEchartData.label.substr(0, 32) + '...' : this.selectEchartData.label,
          textStyle: {
            fontSize: 14
          },
          left: 'center'
        },
        tooltip: { // 属性自带样式
          trigger: 'axis',
          confine: true,
          textStyle: {
            fontSize: 12
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '4%',
          containLabel: true
        },
        xAxis: {
          triggerEvent: true, // 开启坐标轴标签响应和触发鼠标事件,自定义x轴文字样式
          // type: 'category',
          data: this.selectEchartData.questionResVOList.map(obj => obj.optionLabel),
          axisLabel: {
            formatter: function (value) {
              return value.length > 7 ? value.substring(0, 4) + '...' : value
            },
            textStyle: {
              fontSize: 12,
              color: '#999999',
              fontWeight: 400
            },
            interval: 0 // x轴文字
          },
          axisLine: {
            lineStyle: {
              color: '#E0E0E0'
            }
          },
          axisTick: {
            inside: true,
            show: false
          }
        },
        yAxis: [
          {
            type: 'value',
            scale: true,
            min: 0,
            // max: (value) => { // 当数据位数不固定时,最大值向上取整
            //   let num = 10 ** (value.max.toString().length - 2)
            //   return Math.ceil(value.max / num) * num
            // },
            minInterval: 5,
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
                color: '#ddd'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#E0E0E0'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#999999'
              }
            },
            axisTick: {
              inside: true
            }
          }
        ],
        series: [{
          label: {
            show: true, // 是否显示
            position: 'top', // 数值显示的位置
            textStyle: {
              fontSize: 10,
              color: '#333333',
              fontWeight: 600
            }
          },
          type: 'bar',
          barWidth: '24px',
          // barWidth: '60%',
          itemStyle: {
            color: function (params) {
              return '#FF783D'
              // return that.customColors[params.dataIndex % that.customColors.length]/
            }
          },
          data: this.selectEchartData.questionResVOList.map(obj => obj.voteCount)
        }]
      }
      barChart.setOption(barOptions)
      // 自定义悬浮x轴文字样式
      barChart.on('mouseover', 'xAxis', function (e) {
        console.log(e,999);
        let axisTip = document.querySelector('.axis-tip')
        axisTip.innerText = e.value
        axisTip.style.left = e.event.offsetX + 'px'
        axisTip.style.top = e.event.offsetY + 'px'
        axisTip.style.display = 'block'
      })
      barChart.on('mouseout', 'xAxis', function (e) {
        let axisTip = document.querySelector('.axis-tip')
        axisTip.innerText = ''
        axisTip.style.display = 'none'
      })
    },

.axis-tip {

  display: none;

  position: absolute;

  padding: 5px 5px;

  font-size: 12px;

  line-height: 18px;

  max-width: 200px;

  height: fit-content;

  color: #575757;

  background: #ffffff;

  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);

  border-radius: 4px;

  bottom: 0;

  left: 0;

}

        <div id="bar-chart" ref="barChartRef" style="width:40%;height:250px;"></div>

   <div class="axis-tip"></div>