先看效果图:鼠标移入滚动条是不显示十字架的按钮的,所以不会选择区域
使用echarts中的dataZoom属性中的 brushSelect
dataZoom: [
{
type: "slider",
realtime: true, // 拖动时,是否实时更新系列的视图
startValue: 0, // 滚动条开始位置
endValue: 9, // 滚动条初始位置
width: "90%", // 滚动条宽度
height: "4%", // 滚动条高度
bottom: 0, // 滚动条距离底部的距离
fillerColor: "rgba(23, 114, 234, 0.4)", // 滚动条颜色
backgroundColor: "#cfcfcf", //两边未选中的滑动条区域的颜色
brushSelect: false, //是否开启brush选择区域,如果开启,下面的brushStyle也要配置
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: true, // 拖拽时是否展示滚动条两侧的文字
left: "center",
moveHandleStyle: {
opacity: 0,
color: "#fff",
},
},
{
type: "inside",
// zoomOnMouseWheel: false, // 关闭滚轮缩放
// moveOnMouseWheel: true, // 开启滚轮平移
// moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
},
],