当图表数据量过大时,为了使用者能够有更好的体验,对于大数据量的图表处理:
1、当x轴数据过多不能完全展示时,需要添加滚动条:option设置dataZoom字段
javascript
dataZoom: [{ // 这部分是关键,设置滚动条
type: 'slider', // 使用 'slider' 类型的 dataZoom 组件
start: 0, // 左侧在数据窗口范围的起始百分比, 0 表示从头开始
end: 50, // 右侧在数据窗口范围的结束百分比, 100 表示到尾部结束
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
// 是否显示detail,即拖拽时候显示详细数值信息
showDetail: false,
}]
2、数据量过大时会造成legend很多,可能会折叠数据,页面样式也不好看,从而进行legend分页:option设置legend字段
javascript
legend: {
type: 'scroll', // 设置图例为滚动类型
orient: 'horizontal', // 横向显示图例
height: 50, // 设置图例高度
pageIconColor: '#ff781f', // 设置翻页箭头颜色
pageTextStyle: {
color: '#999' // 设置翻页数字颜色
},
pageIconSize: 11, // 设置翻页箭头大小
textStyle: { // 设置图例文字的样式
color: '#999',
fontSize: 12
},
itemHeight: 10, // 设置图例项的高度
itemWidth: 15, // 设置图例项的宽度
left: '1%', // 设置图例左边距
top: '1%' ,// 设置图例上边距
}
3、数据量过大时,tooltip会很长,可能会占据整个页面,考虑给tooltip添加滚动条:option设置tooltip字段
javascript
tooltip: {
trigger: 'axis',
axisPointer:{
type:'shadow',
},
confine:true,
enterable:true,
extraCssText:"max-width:90%;max-height:83%;overflow:auto;"
}