美文网首页
echarts图表dataZoom数据滚动右侧label文字更新

echarts图表dataZoom数据滚动右侧label文字更新

作者: 大梦无痕 | 来源:发表于2024-05-05 17:11 被阅读0次
1714986589573.jpg
dataZoom:[
      {
                type: "slider",
                realtime: true, // 拖动时,是否实时更新系列的视图
                startValue: arr.length,
                endValue: arr.length>5?arr.length-5:0,
                width: 10,
                height: "90%",
                top: "5%",
                right: 10,
                yAxisIndex: [0, 1], // 控制y轴滚动对象
                fillerColor: "#0093ff", // 滚动条颜色
                borderColor: "rgba(17, 100, 210, 0.12)",
                backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
                handleSize: 0, // 两边手柄尺寸
                showDataShadow: false, //是否显示数据阴影 默认auto
                showDetail: false, // 拖拽时是否展示滚动条两侧的文字
                zoomLock: true,
                brushSelect:false,
                moveHandleStyle: {
                    opacity: 0,
                },
            }
]
//解决label更新不及时文字错位问题
let  times = null;
myChart.on('datazoom', function (event) {
  if(times){
    clearTimeout(times);
  }
  setTimeout(() => {
      myChart.resize();  
  }, 2000); //echarts默认动画时长2000 这里设置为动画时长
});

设置myChart.resize(),滚动数据label文字显示正常


1714986670535.jpg

相关文章

网友评论

      本文标题:echarts图表dataZoom数据滚动右侧label文字更新

      本文链接:https://www.haomeiwen.com/subject/cabkfjtx.html