美文网首页
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