当前位置: 首页 > news >正文

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'

        }

      })

    },

http://www.lryc.cn/news/313587.html

相关文章:

  • js和css阻塞问题
  • MySQL 的基础操作
  • 【python进阶篇】面向对象编程(1)
  • 力扣面试经典150 —— 6-10题
  • [密码学]入门篇——加密方式
  • 构建前后端分离项目常用的代码
  • 2575. 找出字符串的可整除数组(Go语言)
  • Redis与 Memcache区别
  • #QT(智能家居界面-界面切换)
  • js拓展-内置对象
  • 【李沐精读系列】GPT、GPT-2和GPT-3论文精读
  • Libevent的使用及reactor模型
  • 查看Linux服务器配置
  • 【机器学习】包裹式特征选择之递归特征添加法
  • 解决cs不能生成Linux木马的问题
  • vue3组件通信方式
  • 前端实现生成图片并批量下载,下载成果物是zip包
  • android 快速实现 圆角矩形控件 及 圆形控件
  • 【Python】外网远程登录访问jupyter notebook+pycharm使用ipython
  • error:0308010C:digital envelope routines::unsupported
  • Vue前端的工作需求
  • 97. 常用的HTTP服务压测工具
  • 活动预告|听云猿生数据创始人 CEO 曹伟分享云数据库行业十余年经验总结
  • 数仓实战——京东数据指标体系的构建与实践
  • Alias许可配置
  • 【读书笔记】针对ICS的ATTCK矩阵详解(一)
  • Rust多线程访问数据,推荐使用mutex还是channel?
  • 基于pytorch的手写体识别
  • Leetcode 56. 合并区间
  • C++:List的使用和模拟实现