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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

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'
   })
 },