Add a scroll bar to the X axis of the echarts chart

1: original image

2: Code

    dataZoom = [
        {
            orient: 'horizontal',
            show: scoreShow,//控制滚动条显示隐藏
            realtime: true, //拖动滚动条时是否动态的更新图表数据
            height: 5, //滚动条高度
            start: 0, //滚动条开始位置(共6等份)
            end: this.endValue,//滚动条结束位置
            top: '95%',
            bottom: '4%',
            zoomLock: false, //控制面板是否进行缩放
            startValue: 0, // 从头开始。
            endValue: 5,// 一次性展示6个
            showDetail: false, // 关闭滚动条提示
            fillerColor: 'rgba(255, 255, 255,0.5)',
        },
        {
            type: 'inside',
            brushSelect: true,
            start: 0,
            end: 6,
            xAxisIndex: [0],
            moveOnMouseMove: true,//是否只平移不缩放
            zoomLock: true,// 鼠标移动触发窗口平移
            zoomOnMouseWheel: false,//鼠标移动能触发窗口缩放
        },
    ]

3: Effect

 

Guess you like

Origin blog.csdn.net/XikYu/article/details/131228365