echarts x轴名称过长tip显示全称

xAxis的axisLabel的内容如下:

axisLabel: {

            rotate: '-45',

            color: document.body.className.indexOf('custom-f4c46d') > -1 ? '#fff' : '#343434',

            // 显示省略号操作(第一步)

            formatter: function (value) {

              var val = ''

              if (value.length > 4) {

                val = value.substr(0, 4) + '...'

                return val

              } else {

                return value

              }

            }

          },

调用:

 

reminder (myChart) {

      // 注意这里,是以X轴显示内容过长为例,如果是y轴的话,需要把params.componentType ==      'xAxis'改为yAxis,多条件可以在此次添加, 判断是否创建过div框,如果创建过就不再创建了, 该div用来盛放文本显示内容的,方便对其悬浮位置进行处理

      var elementDiv = document.getElementById('extension')

      if (!elementDiv) {

        var div = document.createElement('div')

        div.setAttribute('id', 'extension')

        div.style.display = 'block'

        document.querySelector('html').appendChild(div)

      }

      myChart.on('mouseover', function (params) {

        if (params.componentType == 'xAxis') {

          var elementDiv = document.querySelector('#extension')

          // 设置悬浮文本的位置以及样式

          var elementStyle =

              'position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'

          elementDiv.style.cssText = elementStyle

          elementDiv.innerHTML = params.value

          document.querySelector('html').onmousemove = function (event) {

            var elementDiv = document.querySelector('#extension')

            var xx = event.pageX - 10

            var yy = event.pageY + 15

            elementDiv.style.top = yy + 'px'

            elementDiv.style.left = xx + 'px'

          }

        }

      })

      myChart.on('mouseout', function (params) {

        // 注意这里,我是以Y轴显示内容过长为例,如果是x轴的话,需要改为xAxis

        if (params.componentType == 'xAxis') {

          var elementDiv = document.querySelector('#extension')

          elementDiv.style.cssText = 'display:none'

        }

      })

    },

  • 17
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值