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
