问题描述

vue中使用echarts画比如排名柱状图时由于y轴标签长度过长，导致柱状图被挤压变形，解决该问题的思路有两种：
一、将标签内容进行折行显示。
二、限定超过多少字符省略号显示并悬浮提示。
第一种方案折行显示虽然可以解决柱状图挤压变形的问题但是标签内容太多时任然会显的拥挤，因此这里采用第二种方案。

实现

        yAxis: [{
          type: 'category',
          triggerEvent: true,
          inverse: true,
          boundaryGap: true,
          axisLabel: {
            show: true,
            lineStyle: {
              color: '#f2f2f2'
            },
            formatter: function(value) {
              let texts = value
              if (texts.length > 10) {
                // 限制长度自设
                texts = texts.substr(0, 10) + '...'
              }
              return texts
            },
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#C1C1C1",
            }
          },
          data: []
        }],

              <div style="min-height: 350px;position: relative;">
                <v-chart ref="chartData2" :options="chartData2" style="width: 100%; height: 345px;" :autoresize="true"></v-chart>
                <div class="axis-tip2"></div>
              </div>

设置悬浮标签样式

.axis-tip2{
  display: none;
  position: absolute;
  padding: 5px 5px;
  font-size: 12px;
  line-height: 18px;
  color: #575757;
  background: #ffffff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

bindchartEvent(){
  this.$refs.chartData2.chart.on('mouseover', 'yAxis.category', function(e) {
        let axisTip = document.querySelector('.axis-tip1')
        axisTip.innerText = e.value
        axisTip.style.left = e.event.offsetX + 'px'
        axisTip.style.top = e.event.offsetY + 'px'
        axisTip.style.display = 'block'
      })
      this.$refs.chartData2.chart.on('mouseout', 'yAxis.category', function(e) {
        let axisTip = document.querySelector('.axis-tip1')
        axisTip.innerText = ''
        axisTip.style.display = 'none'
      })
}

这里要注意的是在vue-charts中添加事件的方式有两种：方式一：调用组件封装好的事件比如@click，方式二：调用this.$refs.name.chart获取echarts实例然后为其绑定事件。

mounted(){
this.bindchartEvent()
}

注意：不能在created钩子函数中调用bindchartEvent方法，因为此时页面模板还没渲染加载出来，调用this.$refs.name是无法获取组件实例的。

• 描述
  当鼠标经过echarts图表y轴标签时，有时提示信息不显示，造成这个问题的原因是：只有鼠标悬浮到y轴标签时mouseon事件才会触发显示提示信息标签，但是鼠标在标签移动时并不会触发该事件。
• 解决
  既然鼠标在y轴标签移动时没有触发事件那么就为图表添加鼠标经过事件，关键代码如下：

      this.$refs.chartData6.chart.on('mousemove', 'yAxis.category', function(e) {
        let axisTip = document.querySelector('.axis-tip6')
        axisTip.innerText = e.value
        axisTip.style.left = e.event.offsetX + 'px'
        axisTip.style.top = e.event.offsetY + 'px'
        axisTip.style.display = 'block'
      })

• 参考
  echarts鼠标事件