echarts特殊处理(滚动条、legend分页、tooltip滚动)

当图表数据量过大时,为了使用者能够有更好的体验,对于大数据量的图表处理:

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;"
 }
相关推荐
耶啵奶膘36 分钟前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
清灵xmf4 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据4 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
334554325 小时前
element动态表头合并表格
开发语言·javascript·ecmascript