기사 디렉토리
머리말
히스토그램을 예로 들면
echarts, 데이터가 너무 많으면echarts그래프가 뭉쳐서 보기에 매우 흉해 보입니다. 보통 해법은barWidth값을 줄여 열 너비를 줄이는 것이지만, 데이터가 수백 개가 되면 이 장면은 상당히 장관이다. 또 다른 매우 일반적인 방법은 외부 컨테이너에div추가하는 것overflow: scroll;입니다. 실제로 일부 문제를 해결할 수 있지만 데이터 양이 너무 적으면 매우 희소하게 표시되며 경험한 사람이라면 누구나 이해할 것입니다. 집에 가까울수록 위의 어느 것도 최선의 해결책이 아니며echarts실제로 해당API구성이 제공되었으며 가로 스크롤이든 세로 스크롤이든 dataZoom 이 만족할 수 있습니다.
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,
},
]