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

最新推荐文章于 2024-03-13 14:27:48 发布

豆奶dudu

最新推荐文章于 2024-03-13 14:27:48 发布

阅读量618

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_36457584/article/details/132480912

版权

问题：

期望：

解决方案：

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.length
       let rightP = -sliderZoom._displayables.handleLabels[1].style.text.length
  
       this.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]
       })