echarts实现横向和纵向滚动条、dataZoom

---

前言

   利用echarts会碰到这种情况，以柱状图为例子，当数据过多时，echarts图就会堆叠在一起，看起来十分丢脸。通常解决办法是通过减小barWidth值来缩小柱子宽度，但是若数据达到上百条，这局面是相当壮观。另一个很常用的就是在外部容器div添加overflow: scroll;，这确实能解决一些题目，但是如果数据量过少，就会显的非常稀疏，履历过的都懂。言归正传，以上都不是最佳解决方式，echarts实在已经为提供好相应的API设置了，无论是横向滚动还是纵向滚动，dataZoom都能满意。
  

---

1、横向滚动条

1. dataZoom: [
2.     {
3.         // 设置滚动条的隐藏与显示
4.         show: true,
5.         // 设置滚动条类型
6.         type: "slider",
7.         // 设置背景颜色
8.         backgroundColor: "rgb(19, 63, 100)",
9.         // 设置选中范围的填充颜色
10.         fillerColor: "rgb(16, 171, 198)",
11.         // 设置边框颜色
12.         borderColor: "rgb(19, 63, 100)",
13.         // 是否显示detail，即拖拽时候显示详细数值信息
14.         showDetail: false,
15.         // 数据窗口范围的起始数值
16.         startValue: 0,
17.         // 数据窗口范围的结束数值（一页显示多少条数据）
18.         endValue: 5,
19.         // empty：当前数据窗口外的数据，被设置为空。
20.         // 即不会影响其他轴的数据范围
21.         filterMode: "empty",
22.         // 设置滚动条宽度，相对于盒子宽度
23.         width: "50%",
24.         // 设置滚动条高度
25.         height: 8,
26.         // 设置滚动条显示位置
27.         left: "center",
28.         // 是否锁定选择区域（或叫做数据窗口）的大小
29.         zoomLoxk: true,
30.         // 控制手柄的尺寸
31.         handleSize: 0,
32.         // dataZoom-slider组件离容器下侧的距离
33.         bottom: 3,
34.     },
35.     {
36.         // 没有下面这块的话，只能拖动滚动条，
37.         // 鼠标滚轮在区域内不能控制外部滚动条
38.         type: "inside",
39.         // 滚轮是否触发缩放
40.         zoomOnMouseWheel: false,
41.         // 鼠标滚轮触发滚动
42.         moveOnMouseMove: true,
43.         moveOnMouseWheel: true,
44.     },
45. ]

复制代码

---

2、纵向滚动条

1. dataZoom: [
2.     {
3.         // 设置滚动条的隐藏或显示
4.         show: true,
5.         // 设置类型
6.         type: "slider",
7.         // 设置背景颜色
8.         backgroundColor: "rgb(19, 63, 100)",
9.         // 设置选中范围的填充颜色
10.         fillerColor: "rgb(16, 171, 198)",
11.         // 设置边框颜色
12.         borderColor: "rgb(19, 63, 100)",
13.         // 是否显示detail，即拖拽时候显示详细数值信息
14.         showDetail: false,
15.         // 数据窗口范围的起始数值
16.         startValue: 0,
17.         // 数据窗口范围的结束数值（一页显示多少条数据）
18.         endValue: 5,
19.         // 控制哪个轴，如果是number表示控制一个轴，
20.         // 如果是Array表示控制多个轴。此处控制第二根轴
21.         yAxisIndex: [0, 1],
22.         // empty：当前数据窗口外的数据，被设置为空。
23.         // 即不会影响其他轴的数据范围
24.         filterMode: "empty",
25.         // 滚动条高度
26.         width: 8,
27.         // 滚动条显示位置
28.         height: "80%",
29.         // 距离右边
30.         right: 3,
31.         // 控制手柄的尺寸
32.         handleSize: 0,
33.         // 是否锁定选择区域（或叫做数据窗口）的大小
34.         zoomLoxk: true,
35.         // 组件离容器上侧的距离
36.         // 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐
37.         top: "middle",
38.     },
39.     {
40.         // 没有下面这块的话，只能拖动滚动条，
41.         // 鼠标滚轮在区域内不能控制外部滚动条
42.         type: "inside",
43.         // 控制哪个轴，如果是number表示控制一个轴，
44.         // 如果是Array表示控制多个轴。此处控制第二根轴
45.         yAxisIndex: [0, 1],
46.         // 滚轮是否触发缩放
47.         zoomOnMouseWheel: false,
48.         // 鼠标移动能否触发平移
49.         moveOnMouseMove: true,
50.         // 鼠标滚轮能否触发平移
51.         moveOnMouseWheel: true,
52.     },
53. ]

复制代码

来源：https://blog.csdn.net/weixin_51157081/article/details/130095628
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！