前言
使用
echarts
会遇到这种情况,以柱状图为例子,当数据过多时,echarts
图就会堆叠在一起,看起来十分难看。通常解决办法是通过减小barWidth
值来缩小柱子宽度,但是若数据达到上百条,这场面是相当壮观。另一个很常用的就是在外部容器div
添加overflow: scroll;
,这确实能解决一些问题,但是若是数据量过少,就会显的非常稀疏,经历过的都懂。言归正传,以上都不是最佳解决方式,echarts
其实已经为提供好相应的API
配置了,无论是横向滚动还是纵向滚动,dataZoom都能满足。文章来源地址https://www.toymoban.com/news/detail-514541.html
1、横向滚动条
dataZoom: [
{
// 设置滚动条的隐藏与显示
show: true,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
// 是否显示detail,即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值(一页显示多少条数据)
endValue: 5,
// empty:当前数据窗口外的数据,被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度,相对于盒子宽度
width: "50%",
// 设置滚动条高度
height: 8,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域(或叫做数据窗口)的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 3,
},
{
// 没有下面这块的话,只能拖动滚动条,
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
]
2、纵向滚动条
dataZoom: [
{
// 设置滚动条的隐藏或显示
show: true,
// 设置类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
// 是否显示detail,即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值(一页显示多少条数据)
endValue: 5,
// 控制哪个轴,如果是number表示控制一个轴,
// 如果是Array表示控制多个轴。此处控制第二根轴
yAxisIndex: [0, 1],
// empty:当前数据窗口外的数据,被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 滚动条高度
width: 8,
// 滚动条显示位置
height: "80%",
// 距离右边
right: 3,
// 控制手柄的尺寸
handleSize: 0,
// 是否锁定选择区域(或叫做数据窗口)的大小
zoomLoxk: true,
// 组件离容器上侧的距离
// 如果top的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐
top: "middle",
},
{
// 没有下面这块的话,只能拖动滚动条,
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 控制哪个轴,如果是number表示控制一个轴,
// 如果是Array表示控制多个轴。此处控制第二根轴
yAxisIndex: [0, 1],
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标移动能否触发平移
moveOnMouseMove: true,
// 鼠标滚轮能否触发平移
moveOnMouseWheel: true,
},
]
文章来源:https://www.toymoban.com/news/detail-514541.html
到了这里,关于echarts实现横向和纵向滚动条、dataZoom的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!