let option = {
……
xAxis: {
type: "value",
……
},
yAxis: {
type: "category",
……
},
dataZoom: [
{
type: "slider",
show: true, // 显示组件
backgroundColor: "#fff", // 组件的背景颜色
fillerColor: "#9D9D9D", // 选中范围的填充颜色
borderColor: "transparent", // 边框颜色
showDetail: false, // 拖拽时是否显示详细数值信息
start: 100, // 从顶部开始排序 纵轴顶部为100%
end: 0, // 纵轴底部为0%
yAxisIndex: 0, // number类型数值表示控制一个轴,Array类型表示控制多个轴
filterMode: "empty",
width: 4, // 滚动条宽度
right: 3, // 距离右边
handleSize: 0,// 控制手柄的尺寸
zoomLoxk: true, // 是否锁定选择区域(或叫做数据窗口)的大小
top: "top", // 滚动条显示位置
},
{
// 没有下面这块的话,只能拖动滚动条,鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
yAxisIndex: 0, // number类型数值表示控制一个轴,Array类型表示控制多个轴
zoomOnMouseWheel: false, // 滚轮是否触发缩放
moveOnMouseMove: true, // 鼠标移动能否触发平移
moveOnMouseWheel: true,// 鼠标滚轮能否触发平移
},
],
……
}
echarts 排序柱状图使用datazoom设置纵轴显示滚动条
最新推荐文章于 2024-06-08 21:17:27 发布