社区
CSS
帖子详情
echarts图很多 优化页面?
yueluowuhen2
2016-08-22 08:54:46
最近项目中用到一个页面 会有很多echarts图,有20-30个echarts图,用到amazeui,怎么做可以优化页面(现在页面有的时候echarts图加载不出来,有的时候会显示出来),使页面性能提高,谢谢各位大神了
...全文
3501
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
打赏
举报
回复
建议换个版块问问,这个版块懂这的人应该少
Echarts
的地
图
实现拖拽缩放同步功能(解决多层geo缩放、拖动卡顿问题)
Echarts
的地
图
实现拖拽缩放同步功能(解决多层geo缩放、拖动卡顿问题),大屏项目显示云南省3D的地
图
,可拖拽缩放、地
图
打点、点击
图
标弹框等等功能。 ## 使用 - 启动调试服务: `npm start` - 构建 dist: `npm run build` ## 目录结构 - 应用配置: `src/app.js` - 路由配置: `src/routes.js` - 布局文件: `src/layouts` - 通用组件: `src/components` -
页面
文件: `src/pages` ## 效果
图
![screenshot](https://img-blog.csdnimg.cn/db6034f6187c4a0fa6295af60c36803b.png)
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文
大数据之数据可视化技术教程之
echarts
想学习
ECharts
的人群,通过实战案例快速掌握
ECharts
实现数据可视化,真实、有趣、好玩!课程目标:通过疫情实时监控的案例,讲解
ECharts
用法,带着大家从零开始快速掌握
Echarts
数据可视化。课程简介:
ECharts
是一个开源的数据可视化工具,纯 Javascript 的
图
表库,提供许多
图
表,涵盖各行业
图
表应用,满足各种数据可视化的需求。 本课程从零开始带大家学习
Echarts
技术,通过讲解
echarts
展示实战案例,帮助初学者入门,让大家都可以轻松自如的使用这款流行
图
表框架。 如果你是一名前端开发者,
ECharts
是你需要学习的技术,这套视频课程将非常适合您! 课程以通俗易懂的方式讲解
echarts
,真实、有趣、好玩!! 本案例的所有代码全程手敲,一行一行带你写,只讲干货,相信你看完后一定会收获
很多
!
基于PHP、MySQL的web端借还书系统
基于PHP、MySQL的web端借还书系统 数据库设计 用户注册
页面
用户登陆
页面
主
页面
借书 还书 个人信息管理 管理员部分 公告 reCAPTCHA验证验证码校验登录 模糊查询 快到期
图
书提醒 个人历史纪录 通过邮箱找回密码(使用了PHPMailer,简直是救星) 系统说明 统计模块(可以用
Echarts
生成
图
表,但由于只是DEMO,意义不是特别大,主要也没啥数据,生成的
图
表看起来很一般) 代码重构与
优化
项目中
很多
都可以用vue重构,但是因为不是很熟悉,为了不要让自己做的太慢,所以基本都是用jQuery。但是如果都用vue应该会精简
很多
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 配置。
CSS
61,112
社区成员
60,730
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章