echarts histogram scrolling

Achievement effect: the column chart displays a horizontal scroll bar, and mouse scrolling supports the scroll bar to pan

In the echarts document, there are two types of scroll bars for graphics

Built-in type (the effect is: click and drag the mouse in the picture to pan, scroll and zoom in the picture)
Scroll bar type (the effect is: the mouse drags the scroll bar to pan, the mouse drags the scroll bar to zoom in and out)

And what we want to achieve is to combine these two. .
Not only the built-in type that can scroll in the picture, but also the style of the scroll bar

Implementation code

 const zoomData=[  // 有滚动条 平移
          {
              type: 'slider',
              realtime: true,
              start: 0,
              end: 40,  // 初始展示40%
              height: 4,
              fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
              borderColor: "rgba(17, 100, 210, 0.12)", 
              handleSize:0, // 两边手柄尺寸
              showDetail: false, // 拖拽时是否展示滚动条两侧的文字
              top:'96%',
              
              // zoomLock:true, // 是否只平移不缩放
              // moveOnMouseMove:true, //鼠标移动能触发数据窗口平移
              // zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放
          },
          { 
            type: "inside",  // 支持内部鼠标滚动平移
            start: 0,
            end: 40,
            zoomOnMouseWheel: false,  // 关闭滚轮缩放
            moveOnMouseWheel: true, // 开启滚轮平移
            moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
          }
      ]

remember to turn on moveOnMouseWheel and moveOnMouseMove,
after turning on, the scroll wheel scrolls down and the data moves backward

zoomOnMouseWheel Turn off the zoom of the scroll wheel. After closing, the scroll wheel will scroll to the end without rebounding and jittering

Add it to the option to
dataZoom: zoomData,

Example 2

dataZoom: [
            {
                // 滚动条以及缩放
                type: "inside",
                // start: 0,
                // end: endZoom,    // 这里end跟数据有关系 数据越多，end越小 end是百分比例
                startValue: 0, // 从头开始。
                endValue: 6,  // 最多六个
                minValueSpan: 6,  // 放大到最少几个
                maxValueSpan: 365,  //  缩小到最多几个
            },
        ],

The startValue and endValue here represent that only seven are initially displayed, and the seven groups of columns
minValueSpan represent zooming in to a minimum to display a few
maxValueSpan represent zooming out to a maximum of a few

Example 3:

vertical scroll bar

dataZoom=[
            {
                type: "inside",
                startValue: 0, 
                endValue: 2, 
                minValueSpan: 2,  
                maxValueSpan: 2,  
                yAxisIndex: [0],
              zoomOnMouseWheel: false,  // 关闭滚轮缩放
              moveOnMouseWheel: true, // 开启滚轮平移
              moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
            },
            {
              type: 'slider',
              realtime: true,
              startValue: 0, 
              endValue: 2,  
              width:  '3.5',
              height:  '80%',
              yAxisIndex: [0], // 控制y轴滚动
              fillerColor: "rgba(154, 181, 215, 1)", // 滚动条颜色
              borderColor: "rgba(17, 100, 210, 0.12)", 
              backgroundColor: '#cfcfcf',//两边未选中的滑动条区域的颜色
              handleSize:0, // 两边手柄尺寸
              showDataShadow: false,//是否显示数据阴影 默认auto
              showDetail: false, // 拖拽时是否展示滚动条两侧的文字
              top:'1%',
              right:'5',
          }
          
        ]

echarts histogram scrolling

Guess you like