angular2项目关于Echarts图表的处理
在NiceFish项目中关于Echarts组件和指令是直接注册在appModule根模块中的,这样路由只需这样写就可以让浏览器加载图标组件:
在chart组件视图中:
<div class="row" [@fadeIn]>
<div class="col-sm-12">
<echart [chartType]="pieChart" class="nf-chart"></echart>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<echart [chartType]="barChart" class="nf-chart"></echart>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<echart [chartType]="lineChart" class="nf-chart"></echart>
</div>
</div>
chartType是封装了Echarts的angular指令,pieChart,barChart,lineChart是各种图标的配置对象,这里angular2对于指令用中括号来识别。
chart组件定义代码如下:
这里的chart组件不是公用组件,是针对项目具体功能模块而定义的组件,里面的三个配置对象pieChart,barChart,lineChart是根据具体情况定义的Echarts图表配置信息,这里真正抽象出来的是EchartsOptionDirective1这个指令,这个指令会根据输入的配置信息来构造指定的Echarts图表,
EchartsOptionDirective1指令如下:
这个指令在本地引入Echarts库,在AOT编译的时候,项目会将Echarts包合并到核心js文件中,在这个例子中由于Chart组件和EchartsOption指令注册在了AppModule根模块应用中,当初次请求页面时,包含有Echarts内容的js文件会被加载进来,但是如果初始页面中没有运用到Echarts功能,那加载进来的Echarts内容就是多余的了,这会加重前端性能负担。
像这样的情况,可以利用Chart组件和EchartsOption指令构造一个模块EchartsModule,项目在AOT的时候只会将和该模块相关的js合并成一个js文件,当浏览器初始时候下载js文件时就不会将Echarts内容下载下来,减少网页加载的时间。
当用户点击想要查看Echarts功能时,项目会根据上面的路由信息找到对应的EchartsModule,从而加载Echarts功能相关的js文件,然后将Echarts功能组件反应到页面上,这就是按需加载模式。这种模式在体积越来越大,功能越来越多,对性能要求越来越高的WebApp上
应用越来越重要。
angular2项目关于Echarts图表的处理的更多相关文章
- 在内网中 vue项目添加ECharts图表插件
原文地址:https://www.cnblogs.com/aknife/p/11753854.html 最近项目中要使用到图表 但是项目在内网中无法直接使用命令安装 然后我在外网中弄个vue的项目(随 ...
- 百度开源项目插件 - Echarts 图表
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 若依项目整合eCharts实现图表统计功能
eCharts是一款强大的图表统计工具,具体介绍可查看其官网 http://echarts.baidu.com/echarts2/index.html 下面记录一下如何在若依项目中使用eCharts. ...
- echarts图表标签(axisLabel)折行
在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...
- 在vue中使用echarts图表
在vue中使用echarts图表 转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...
- vue-cli ——解决多次复用含有Echarts图表组件的问题
在vue项目里,组件复用是一件很开心的事,可以节省很多时间去排版,达到事半功倍效果,但是昨晚在vue-cli项目里组件复用时发现基于Echarts图表的组件不能够复用,昨晚捯饬了很久,终于还是解决了这 ...
- 【可视化】DataV接入ECharts图表库 可视化利器强强联手
DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...
- vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控
流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...
- vue中添加Echarts图表的使用,Echarts的学习笔记
项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...
随机推荐
- Lodash JavaScript 实用工具库
地址:https://www.lodashjs.com/ Lodash 是一个一致性.模块化.高性能的 JavaScript 实用工具库.
- webpack文件笔记
webpack.prod.conf.js里面的ExtractTextPlugin,把css文件提取出来,专门进行打包minify :压缩 依赖的第三方库打包到vendor.js里面 每次项目打包的时候 ...
- poj2739 poj2100 尺取法基础(二)
都是很简单的题目 poj2739素数打表+单点推移 #include<iostream> #include<cstring> #include<cstdio> us ...
- SPLAY,LCT学习笔记(三)
前两篇讲述了SPLAY模板操作,这一篇稍微介绍一下SPLAY的实际应用 (其实只有一道题,因为本蒟蒻就写了这一个) 例:bzoj 1014火星人prefix 由于本蒟蒻不会后缀数组,所以题目中给的提示 ...
- python 全栈开发,Day123(图灵机器人,web录音实现自动化交互问答)
昨日内容回顾 . 百度ai开放平台 . AipSpeech技术,语言合成,语言识别 . Nlp技术,短文本相似度 . 实现一个简单的问答机器人 . 语言识别 ffmpeg (目前所有音乐,视频领域,这 ...
- 步步为营-64-进程&线程
1 进程 using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; us ...
- Spring的控制反转和依赖注入
Spring的官网:https://spring.io/ Struts与Hibernate可以做什么事? Struts, Mvc中控制层解决方案 可以进行请求数据自动封装.类型转换.文件上传.效验… ...
- Java jvm 内存参数限制
nohup java -jar -Xms3g -Xmx3g jenkins.war > jenkins.log 2>&1 &
- python面试笔试题,你都会了吗?快来复习
1.一行代码实现1--100之和 利用sum()函数求和 >>> sum(range(0,101)) 5050 2.如何在一个函数内部修改全局变量 利用global 修改全局变量 a ...
- AndrodStudio报错: Cannot launch AVD in emulator.
Cannot launch AVD in emulator.Output:Hax is enabledHax ram_size 0x60000000HAX is working and emulato ...