##1. echart横向柱状图滚动条从顶部开始
dataZoom: [
{
id: 'dataZoomY',
yAxisIndex: [0, 1],
show: true, // 是否显示滑动条,不影响使用
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
start: 100, // 默认显示0%
width: 6,
borderColor: 'green',
// borderColor: 'transparent',
fillerColor: '#ebeef5',
zoomLock: true,
showDataShadow: false, // 是否显示数据阴影 默认auto
backgroundColor: 'red',
// backgroundColor: '#fff',
showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
realtime: true, // 是否实时更新
filterMode: 'filter',
handleIcon: 'circle',
handleStyle: {
color: '#ebeef5',
borderColor: '#ebeef5',
},
handleSize: '80%',
moveHandleSize: 0,
maxValueSpan: 10,
minValueSpan: 10,
brushSelect: false, // 刷选功能,设为false可以防止拖动条长度改变 ************(这是一个坑)
},
{
type: 'inside',
yAxisIndex: [0, 1],
start: 0, // 默认显示0%
zoomOnMouseWheel: false, // 滚轮是否触发缩放
moveOnMouseMove: true, // 鼠标滚轮触发滚动
moveOnMouseWheel: true,
},
],
##1. echart纵向柱状图滚动条从顶部开始
dataZoom: [
{
type: "slider",
height: 10,
textStyle: {
fontSize: 12,
color: "#2A2A2A" // 滚动条两边字体样式
},
show: gdwzjrlqkTableData.data.length > 18 ? true : false,
xAxisIndex: [0],
showDetail: false,
bottom: 0,
// fillerColor: "rgba(28, 114, 219, 0.93)",
handleStyle: {
color: "#17B9FF"
},
left: 20,
right: 20,
startValue: 0, // 初始显示值
endValue: 18, // 结束显示值
zoomLock: true,
brushSelect: false
},
{
type: "inside",
height: 10,
show: true,
xAxisIndex: [0],
start: 1, // 默认为1
end: 100, // 默认为100
zoomOnMouseWheel: false, // 如何触发缩放。可选值为:true:表示不按任何功能键,鼠标滚轮能触发缩放。false:表示鼠标滚轮不能触发缩放。'shift':表示按住 shift 和鼠标滚轮能触发缩放。'ctrl':表示按住 ctrl 和鼠标滚轮能触发缩放。'alt':表示按住 alt 和鼠标滚轮能触发缩放。。
moveOnMouseMove: true,
moveOnMouseWheel: true // 鼠标滚轮实现移动
}
]