echarts数据过多开启dataZoom配置

555 阅读1分钟
// 柱状数据过多,移动端设置此参数可以左右滑动
dataZoom: [{
  type: 'inside',
  show: true, // flase直接隐藏图形
  xAxisIndex: 0,
  left: '15%', // 滚动条靠左侧的百分比
  bottom: 'auto',
  startValue: 0,         
  endValue: 5,
  throttle: 100, // 设置触发视图刷新的频率
  zoomLock: true,
  zoomOnMouseWheel: false, // 是否启用鼠标滚轮缩放
  moveOnMouseWheel: false, // 鼠标滚轮不能触发平移
  preventDefaultMouseMove: false // 是否阻止 mousemove 事件的默认行为
}],
{
  type: 'slider',
  show: true,
  zoomLock: true,
  width: '90%',
  height: '6px',
  left: '9%',
  bottom: 12,
  xAxisIndex: [0, 1],
  startValue: 0,         
  endValue: 3,
  handleSize: '100%',
  handleStyle: {
    color: '#AFEFF9',
    borderWidth: 0
   },
  handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
  brushSelect: false,
  showDetail: false,
  showDataShadow: false,
  borderRadius: 3, // 低于5.0版本不支持
  borderColor: 'none',
  fillerColor: '#447cff',
  backgroundColor: '#F5F5F5'
}