社区
CSS
帖子详情
echarts图很多 优化页面?
yueluowuhen2
2016-08-22 08:54:46
最近项目中用到一个页面 会有很多echarts图,有20-30个echarts图,用到amazeui,怎么做可以优化页面(现在页面有的时候echarts图加载不出来,有的时候会显示出来),使页面性能提高,谢谢各位大神了
...全文
3489
7
打赏
收藏
echarts图很多 优化页面?
最近项目中用到一个页面 会有很多echarts图,有20-30个echarts图,用到amazeui,怎么做可以优化页面(现在页面有的时候echarts图加载不出来,有的时候会显示出来),使页面性能提高,谢谢各位大神了
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
7 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
zoujiawei6
2018-01-04
打赏
举报
回复
我有个想法——逐步加载 echarts有个ready方法。在一个echarts调用ready(加载完成)后,才开始加载另一个echarts方法。 逐步加载好处就是:不会因为同时加载多个echarts而导致低端机卡死。 但也有坏处:越是后面的echarts显示的越慢。 只能优化这个缺点,而无法避免:相对于一次加载一个,可以一次加载多个。 需要考虑低配机问题:在低配机上测试同时加载多少个echarts会卡。然后就以少于这个的数量为每次加载数量。
咸哼酒家
2018-01-04
打赏
举报
回复
JS是客户端的加载,加载几个图而已,速度慢只能是你机器配置的问题或者你到后台的请求执行太慢,是数据出不来,自然无法加载,这不是加载慢 ,是后台查询慢。
qq_37263648
2017-12-27
打赏
举报
回复
楼主 怎么解决的
半途流浪
2017-07-21
打赏
举报
回复
1
什么页面会有二三十个echarts图啊,大屏展示都不见得有这么多吧..
浪子回头8
2017-07-18
打赏
举报
回复
你一次加载太多了,建议分成多个页面,一次加载10个以内
baidu_39520090
2017-07-15
打赏
举报
回复
代码优化,要分析的是,这个加载慢 是否包含数据异步的时间?做个插件本身就慢,我用了好几次都是,只好做个加载图片.
wow_Interesting
2016-08-25
打赏
举报
回复
建议换个版块问问,这个版块懂这的人应该少
vue-element-
echarts
-performance-optimization
记一次vue+element+
echarts
项目的
优化
(如何轻松将项目性能提升70%) 注意:本文有点标题党了,
图
很多
很罗嗦,不想看
图
的同学可以直接看加粗的重点和最后的总结。 我是是小白,哪里有不对的地方或者更好的方案请不要给我面子,马上提出来 最近在做一个项目,技术栈为vue全家桶 + element-ui +
echarts
,打包后发现有1.44M,首屏体验很差。这能忍?果断开始
优化
。下面说说我是如何将一个打包后1.44MB的项目变成打包后只有0.42MB,性能提升70% 的。
优化
过程 准备: vue-cli提供了一个很方便的查看代码打包后体积的命令,只需在正常的打包命令后加一个--report即可,这样打包完成后会自动开启一个
页面
,展示各个依赖包的大小。 npm run build --report
优化
前: 先看看
优化
前的大小吧 这是打包前本地localhost中首屏加载的js文
基于PHP、MySQL的web端借还书系统
基于PHP、MySQL的web端借还书系统 数据库设计 用户注册
页面
用户登陆
页面
主
页面
借书 还书 个人信息管理 管理员部分 公告 reCAPTCHA验证验证码校验登录 模糊查询 快到期
图
书提醒 个人历史纪录 通过邮箱找回密码(使用了PHPMailer,简直是救星) 系统说明 统计模块(可以用
Echarts
生成
图
表,但由于只是DEMO,意义不是特别大,主要也没啥数据,生成的
图
表看起来很一般) 代码重构与
优化
项目中
很多
都可以用vue重构,但是因为不是很熟悉,为了不要让自己做的太慢,所以基本都是用jQuery。但是如果都用vue应该会精简
很多
大数据之数据可视化技术教程之
echarts
想学习
ECharts
的人群,通过实战案例快速掌握
ECharts
实现数据可视化,真实、有趣、好玩!课程目标:通过疫情实时监控的案例,讲解
ECharts
用法,带着大家从零开始快速掌握
Echarts
数据可视化。课程简介:
ECharts
是一个开源的数据可视化工具,纯 Javascript 的
图
表库,提供许多
图
表,涵盖各行业
图
表应用,满足各种数据可视化的需求。 本课程从零开始带大家学习
Echarts
技术,通过讲解
echarts
展示实战案例,帮助初学者入门,让大家都可以轻松自如的使用这款流行
图
表框架。 如果你是一名前端开发者,
ECharts
是你需要学习的技术,这套视频课程将非常适合您! 课程以通俗易懂的方式讲解
echarts
,真实、有趣、好玩!! 本案例的所有代码全程手敲,一行一行带你写,只讲干货,相信你看完后一定会收获
很多
!
amis前端低代码框架 v1.1.4
此版本更新内容包括:Feature :sparkles: 新增 sortBy 和 topAndOther filter (#1378) (#1379) api 新增 responseData 配置 (#1379) 添加季度选择器 Quarter (#1382) Container 支持设置样式 (#1411) 加入 ecStat, Apache
ECharts
(incubating) 的统计和数据挖掘工具 (#1419) Form 支持 feedback (#1420) 新增仿 antd 主题 (#1421) Enhancement jssdk 支持外部监控路由变化重新切换
页面
(#1373) 选择类表单项 selectFirst 跳过 disabled 的选项 (#1393) iconfont 发布到 sdk 里 (#1395) api mock 地址替换 (#1408)
Echarts
没数据时显示 loading (#1409) Breaking :翻译文件的 key 不再是中文,如果有修改过英文翻译,需要换成新 key (#1416) (#1418) 拆解 factory.tsx,添加 RootRenderer,并能 处理部分 action, 直接渲染个按钮也能弹窗,发ajax了 (#1425) Text 配置 source 样式
优化
(#1429) 更换 autobind,继承时 this 不错乱 (#1433) Bugfix 修复 表单项在不配置 name 的时候,value 属性失效问题 (#1372) 修复 Excel 导出的列顺序依照配置的顺序,而不是数据源 (#1377) 修复 ChartRadios tooltip 问题. (#1378) 修复 位置选择组件在新版百度地
图
api 下无法使用问题 (#1381) 修复 表单项有多个的时候,回车不提交问题 (#1387) 修复 helper 中 white-space 不正确问题 (#1390) 修复 Excel 导出不支持嵌套 name 和 tpl 问题 (#1424) 修复 收起状态导航菜单不可点击跳转问题 (#1428) 修复 Checkbox 无 disabled 样式问题 (#1414)amis前端低代码框架是一个低代码前端框架,它使用 JSON 配置来生成
页面
,可以节省
页面
开发工作量,极大提升开发前端
页面
的效率。 目前在百度广泛用于内部平台的前端开发,已有 100+ 部门使用,创建了 3w+
页面
。amis前端低代码框架特点1、不需要懂前端:在百度内部,大部分 amis 用户之前从来没写过前端
页面
,也不会 JavaScript,却能做出专业且复杂的后台界面,这是所有其他前端 UI 库都无法做到的; 2、不受前端技术更新的影响:百度内部最老的 amis
页面
是 4 年多前创建的,至今还在使用,而当年的 Angular/Vue/React 版本现在都废弃了,当年流行的 Gulp 也被 Webpack 取代了,如果这些
页面
不是用 amis,现在的维护成本会很高; 3、享受 amis 的不断升级:amis 一直在提升细节交互体验,比如表格首行冻结、下拉框大数据下不卡顿等,之前的 JSON 配置完全不需要修改; 4、可以完全使用可视化
页面
编辑器 来制作
页面
:一般前端可视化编辑器只能用来做静态原型,而 amis 可视化编辑器做出的
页面
是可以直接上线的。 5、提供完整的界面解决方案:其它 UI 框架必须使用 JavaScript 来组装业务逻辑,而 amis 只需 JSON 配置就能完成完整功能开发,包括数据获取、表单提交及验证等功能,做出来的
页面
不需要经过二次开发就能直接上线; 6、内置 100+ 种 UI 组件:包括其它 UI 框架都不会提供的富文本编辑器、条件组合等,能满足各种
页面
组件展现的需求,而且对于特殊的展现形式还可以通过 自定义组件 来扩充; 7、容器支持无限级嵌套:可以通过组合来满足各种布局需求; 8、经历了长时间的实战考验:amis 在百度内部得到了广泛使用,在 4 年多的时间里创建了 3 万+
页面
,从内容审核到机器管理,从数据分析到模型训练,amis 满足了各种各样的
页面
需求,最复杂的
页面
有超过 1 万行 JSON 配置。
amis前端低代码框架-其他
amis 是一个低代码前端框架,它使用 JSON 配置来生成
页面
,可以节省
页面
开发工作量,极大提升开发前端
页面
的效率。 目前在百度广泛用于内部平台的前端开发,已有 100+ 部门使用,创建了 3w+
页面
。 特点: 1、不需要懂前端:在百度内部,大部分 amis 用户之前从来没写过前端
页面
,也不会 JavaScript,却能做出专业且复杂的后台界面,这是所有其他前端 UI 库都无法做到的; 2、不受前端技术更新的影响:百度内部最老的 amis
页面
是 4 年多前创建的,至今还在使用,而当年的 Angular/Vue/React 版本现在都废弃了,当年流行的 Gulp 也被 Webpack 取代了,如果这些
页面
不是用 amis,现在的维护成本会很高; 3、享受 amis 的不断升级:amis 一直在提升细节交互体验,比如表格首行冻结、下拉框大数据下不卡顿等,之前的 JSON 配置完全不需要修改; 4、可以完全使用可视化
页面
编辑器 来制作
页面
:一般前端可视化编辑器只能用来做静态原型,而 amis 可视化编辑器做出的
页面
是可以直接上线的。 5、提供完整的界面解决方案:其它 UI 框架必须使用 JavaScript 来组装业务逻辑,而 amis 只需 JSON 配置就能完成完整功能开发,包括数据获取、表单提交及验证等功能,做出来的
页面
不需要经过二次开发就能直接上线; 6、内置 100+ 种 UI 组件:包括其它 UI 框架都不会提供的富文本编辑器、条件组合等,能满足各种
页面
组件展现的需求,而且对于特殊的展现形式还可以通过 自定义组件 来扩充; 7、容器支持无限级嵌套:可以通过组合来满足各种布局需求; 8、经历了长时间的实战考验:amis 在百度内部得到了广泛使用,在 4 年多的时间里创建了 3 万+
页面
,从内容审核到机器管理,从数据分析到模型训练,amis 满足了各种各样的
页面
需求,最复杂的
页面
有超过 1 万行 JSON 配置。 amis前端低代码框架 更新日志: v1.1.7 Feature Wrapper 组件 style 支持动态获取 数据映射支持 cookie 获取 内置 filter 新增 map 方法 Rating 组件支持清空 Tabs 的 activeKey 支持变量 Excel 导出支持自定义文件名 数据映射的 key 可以支持 . 或者 [] 来指定路径 Tree-Selector 支持懒加载 升级
ECharts
到 5.1.1 升级 Monaco-Editor 到 0.24.0 Enhancement 升级 mst 到 3 的最新版本 开发使用 concurrently 避免新开一个窗口 data-link
优化
Wizard 组件新增 startStep 配置项 按钮 tooltip 整理,支持 disabledTip Each 组件空状态时文字居左,同时将空数组状态也认为是空状态 去掉 Tab line 模式下顶部的 padding Uuid 有值时不设置,没值自动设置 TextArea 组件最小行数限制 & 静态展示超出等 Form 远端校验显示报错时,可以再次提交 Nav 的 mapTree 需要 depthFirst Checkboxes 分组样式
优化
DateTime-Range下拉增加 popoverClassName 属性,可以自定义弹框的 className; 父级有缩放比时弹框宽度计算问题修复; Date 快捷键支持上月底 autoFill 支持多选 CRUD 的 toolbar 默认不再将最后一个组件放右边 接口兼容多种 json 返回格式 CRUD filterable 判断是否选中不要那么严格 Button-Group disabled 统一使用透明度的方式来实现,不然无法区分选中状态是哪个 调整日期按钮位置顺序 和 Dialog 统一 Bugfix 修复 Audio should not call load method at first render 修复 文档多余描述 修复 CRUD filter Combo模式不能清空查询条件 修复 初始状态 autoFill 不同步的问题 修复 文档样例错误 修复 Audio 组件 src 属性不符合预期的行为 修复 表单联合校验问题 修复 PopOver 宽度计算问题 修复
图
片表单项 disabled 影响放大功能的问题 修复 Transfer selectTitle resultTitle 不生效的问题 修复 Tree 组件问题 修复 Fiule 组件错误提示样式问题 修复 Select 组件自定义菜单模式下无法全选问题 修复 Number 最大最小值校验问题 修复 sdk 中 dialog 里的编辑器弹窗被遮挡问题 修复
CSS
61,110
社区成员
60,736
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章