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

echarts 的dataZoom滑块两端文字被遮挡

 问题:

期望:

 

 解决方案:

1:调整宽度(4版本的没有width属性)

2. 参考:echarts图标设置dataZoom拖拽时间轴时自动调整两侧文字的位置_datazoom 位置_乌栖曲的博客-CSDN博客

 设置文字的定位

const sliderZoom = this.chart._componentsViews.find(item => item.__id.indexOf('slider') !== -1)sliderZoom._displayables.handleLabels[0].position= [80, 0]sliderZoom._displayables.handleLabels[1].position = [-80,0]let leftP = sliderZoom._displayables.handleLabels[0].style.text.lengthlet rightP = -sliderZoom._displayables.handleLabels[1].style.text.lengththis.chart.on('datazoom', function (e) {if (e.start < 10) {leftP = sliderZoom._displayables.handleLabels[0].style.text.length * 8} else {leftP = 0}if (e.end > 90) {rightP = -sliderZoom._displayables.handleLabels[1].style.text.length * 8} else {rightP = 0}sliderZoom._displayables.handleLabels[0].position = [leftP, 0]sliderZoom._displayables.handleLabels[1].position = [rightP, 0]})

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

相关文章:

  • MongoDB基本使用
  • C++ 中的左值(Lvalues)和右值(Rvalues)
  • html流光按钮
  • HAProxy+nginx搭建负载均衡群集
  • logback-spring.xml 的配置及详解(直接复制粘贴可用)
  • C语言易错点整理
  • 60.每日一练:回文数(力扣)
  • 算法通关村第5关【青铜】| Hash和队列的特征
  • C++:函数
  • Linux网络编程:libevent事件通知库
  • java.lang.reflect.InvocationTargetException:null报未知异常
  • MySQL高级篇——MySQL架构篇1(Linux下MySQL8的安装与使用)
  • 解决 go mod tidy 加载模块超时
  • 金融市场中的机器学习;快手推出自研语言模型“快意”
  • 【面试刷题】——什么是深拷贝和浅拷贝?
  • 物联网(IoT)安全挑战与解决方案: 分析物联网设备面临的安全威胁,以及如何设计和管理安全的IoT生态系统
  • Ubuntu 22.04.3 LTS 维护更新发布
  • 平安健康,找到了医疗服务的价值密码
  • ❤ vue 使用原生组件
  • 4.12 TCP 连接,一端断电和进程崩溃有什么区别?
  • 十二、pikachu之URL重定向
  • 贝叶斯公式中的动词 命名技巧
  • ctfshow-web13 文件上传
  • Python项目开发案例————学生信息管理系统(附源码)
  • 2023-08-25力扣每日一题
  • Vue3中的计算属性和属性监听
  • 微信开发之一键修改群公告的技术实现
  • 【git】工作场景中常用的git命令
  • Vue路由(详解)
  • 打开软件提示msvcp140.dll丢失的解决方法,msvcp140主要丢失原因