在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图表的处理的更多相关文章

  1. 在内网中 vue项目添加ECharts图表插件

    原文地址:https://www.cnblogs.com/aknife/p/11753854.html 最近项目中要使用到图表 但是项目在内网中无法直接使用命令安装 然后我在外网中弄个vue的项目(随 ...

  2. 百度开源项目插件 - Echarts 图表

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  3. 若依项目整合eCharts实现图表统计功能

    eCharts是一款强大的图表统计工具,具体介绍可查看其官网 http://echarts.baidu.com/echarts2/index.html 下面记录一下如何在若依项目中使用eCharts. ...

  4. echarts图表标签(axisLabel)折行

    在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...

  5. 在vue中使用echarts图表

    在vue中使用echarts图表   转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...

  6. vue-cli ——解决多次复用含有Echarts图表组件的问题

    在vue项目里,组件复用是一件很开心的事,可以节省很多时间去排版,达到事半功倍效果,但是昨晚在vue-cli项目里组件复用时发现基于Echarts图表的组件不能够复用,昨晚捯饬了很久,终于还是解决了这 ...

  7. 【可视化】DataV接入ECharts图表库 可视化利器强强联手

    DataV接入ECharts图表库 可视化利器强强联手 摘要: 两个扛把子级产品的结合,而且文末有彩蛋. DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣,ECharts 是广受数据可视化 ...

  8. vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

    流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...

  9. vue中添加Echarts图表的使用,Echarts的学习笔记

    项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...

随机推荐

  1. 利用jstack命令定位占用cpu高的java线程及具体错误代码信息

    1.先用top查询某进程的线程CPU占用情况,定位到cpu占用高的进程pid 2.根据pid定位具体的线程top -p PID -H ,找出占用cpu最大的pid,此处占用cpu比较平均,我们随便选择 ...

  2. 初识numpy

    from numpy import *   导入numpy包 random可以生成随机数组 通过mat函数,将数组转换成矩阵,可以对矩阵进行求逆计算等.其中.I操作实现了矩阵求逆计算操作. 执行矩阵乘 ...

  3. robotium之无name、ID仅有desc定位

    场景如图: 没有name和ID,群里问了,也没人搭理我,自己试验了下,发现这个法子可用,直接贴代码: Activity act = solo.getCurrentActivity(); int ide ...

  4. web前端开发分享-css,js提高篇

    一. css基础知识掌握之后(个人的标准是:弄清块元素与内联元素的区别,弄清float的应用场景,弄清position[pə'zɪʃən] 下五个属性static['stætɪk],relative[ ...

  5. 用strings命令查看kafka-log内容

    kafka的log内容格式还不没怎么了解,想快速浏览消息内容的话,除了使用它自带的kafka-console-consumer.sh脚本,还可以直接去看log文件本身,不过内容里有部分二进制字符,通过 ...

  6. java StringTokenizer

    在java引入正则表达式和Scanner类之前分割字符串的唯一方法是使用StringTokenizer来分词,不过现在有了正则表达式和Scanner类我们可以使用更加简单更加简洁的方式来完成同样的工作 ...

  7. python接口自动化测试二十一:类和方法

    # 类和方法 class Count(): def __init__(self, aaa, bbb): # 初始化 # 可以放公共的参数 print('实例化的时候,会执行init的内容') self ...

  8. icomet研究

    官方文档https://github.com/ideawu/icomet/wiki 如何实现的长连接:noop: 心跳消息+HTTP endless chunk 以班级ID为主键,进行班级通道的创建: ...

  9. Springboot实现热部署

    所谓的热部署:比如项目的热部署,就是在应用程序在不停止的情况下,实现新的部署 而Springboot在我们每次修改完代码之后,可能只是修改下打印的信息,就得重新启动App类,这样太浪费时间,有没有一种 ...

  10. hibernate查询竟然有6种方法

    hibernate查询的6种方法 1.HQL查询 2.对象化查询Criteria方法 3.动态查询DetachedCriteria 4.例子查询 5.sql查询 6.命名查询 1.HQL查询 stat ...