type: 'inside' 为内置控件可通过滑轮放大缩小
type:'slider'为外部滑动控件,需要通过鼠标拖拽滑动块
dataZoom: [ { // 这个dataZoom组件,默认控制x轴。 type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件 start: 10, // 左边在 10% 的位置。 end: 60 // 右边在 60% 的位置。 }, { // 这个dataZoom组件,也控制x轴。 type: 'inside', // 这个 dataZoom 组件是 inside 型 dataZoom 组件 start: 10, // 左边在 10% 的位置。 end: 60 // 右边在 60% 的位置。 }, { type: 'slider', yAxisIndex: 0, start: 30, end: 80 }, { type: 'inside', yAxisIndex: 0, start: 30, end: 80 } ],
我的运用:
dataZoom: [ //给x轴设置滚动条 { start: 0, //默认为0 end: 60 , //9代表x轴data.length,8代表可展示的最大数 越小间隔越大 type: 'slider', show:true, showDetail: false, //是否显示detail 文字 xAxisIndex: [0], handleSize: 15, //滑动条的 左右2个滑动条的大小 height: 10, //组件高度 bottom: 5, //下边的距离 handleColor: '#ddd', //h滑动图标的颜色 handleStyle: { borderColor: "#cacaca", borderWidth: "1", shadowBlur: 2, background: "#ddd", shadowColor: "#ddd", } }, { type: 'inside', start: 0, //默认为1 end: 60, //9代表x轴data.length,8代表可展示的最大数 越小间隔越大 xAxisIndex: [0], } ],