y 轴滚动条:
dataZoom: [
{
type: 'slider',
show: true,
// 设置组件控制的y轴
yAxisIndex: 0,
left: 0,
// top: 60,
// 数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%
// 也可以用 startValue设置起始值
start: 0,
end: 36,
width: 8,
// height: 450,
// 组件的背景颜色
// left: 600, //左边的距离
// right: 8,//右边的距离
borderRadius: 5,
borderColor: "rgba(43,48,67,0.8)",
fillerColor: '#269cdb',//滑动块的颜色
backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
// 是否显示detail,即拖拽时候显示详细数值信息
showDetail: false,
// 控制手柄的尺寸
handleSize: 16,
// 是否在 dataZoom-silder 组件中显示数据阴影。数据阴影可以简单地反应数据走势。
showDataShadow: false,
},
{
type: 'inside',
yAxisIndex: [0],
start: 1,
// end: 36,
// 不按任何功能键,鼠标滚轮能触发缩放
zoomOnMouseWheel: false,
// 不按任何功能键,鼠标移动能触发数据窗口平移
moveOnMouseWheel: true
}
],
x 轴滚动条:
dataZoom: [
{
// start: 0,//默认为0
// end: 100,//默认为100
type: "slider",
show: false,
// xAxisIndex: [0],
handleSize: 0, //滑动条的 左右2个滑动条的大小
startValue: 0, // 初始显示值
endValue: 6, // 结束显示值
height: 10, //组件高度
left: "5%", //左边的距离
right: "4%", //右边的距离
bottom: 5, //底边的距离
borderColor: "#000",
fillerColor: "#269cdb",
borderRadius: 5,
backgroundColor: "#33384b", //两边未选中的滑动条区域的颜色
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
realtime: true, //是否实时更新
filterMode: "filter",
},
//下面这个属性是里面拖到
{
type: "inside",
show: true,
// xAxisIndex: [0],
start: 1, //默认为1
end: 100, //默认为100
},
],