Angular2.0/4.0 使用Echarts图表的示例代码


Posted in Javascript onDecember 07, 2017

前言:在开发中现在需要使用echarts来制作图标,所以就在网络上各种找资料,最后发现ngx-echarts轮子可用。那么就走一波.

方式: 使用echarts和ngx-eachrts两个依赖,借助于ngx..,是因为echarts是基于js编写,没有ts文件。所以就使用ngx-echarts来使用即可。

第一步:安装依赖

npm install echarts --save
npm install ngx-echarts --save

第二步:在Module中引入

import { NgxEchartsModule } from 'ngx-echarts';
@NgModule({
 imports: [
 ...,
// 引入module
 NgxEchartsModule
 ],
})
export class AppModule { }

第三步:在angular-cli中添加js引入

// edit .angular-cli.json
{
 "scripts": [
 // add this: 注意,在echarts中可能没有提供echarts.min.js但是肯定有echarts.js的。对应引入即可。
 "../node_modules/echarts/dist/echarts.min.js"
// 还可以添加中英文,主题。。。。
 ],
}

第四步:页面中使用

<div echarts [options]="options" [loading]="isLoading" class="demo-chart"></div>

各种文件

. html

<div echarts [options]="options" class="demo-chart"></div>

. ts

options: any;
 constructor() { }
 ngOnInit() {
 let xAxisData = [];
 let data1 = [];
 let data2 = [];
 for (let i = 0; i < 100; i++) {
  xAxisData.push('category' + i);
  data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
  data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
 }
 this.options = {
  legend: {
  data: ['bar', 'bar2'],
  align: 'left'
  },
  tooltip: {},
  xAxis: {
  data: xAxisData,
  silent: false,
  splitLine: {
   show: false
  }
  },
  yAxis: {
  },
  series: [{
  name: 'bar',
  type: 'bar',
  data: data1,
  animationDelay: function (idx) {
   return idx * 10;
  }
  }, {
  name: 'bar2',
  type: 'bar',
  data: data2,
  animationDelay: function (idx) {
   return idx * 10 + 100;
  }
  }],
  animationEasing: 'elasticOut',
  animationDelayUpdate: function (idx) {
  return idx * 5;
  }
 };
 }

. AppModule 就不在叙述了

最终的结果:

Angular2.0/4.0 使用Echarts图表的示例代码

最后

当然是附上ngx-echarts的官网咯,以上的例子其实就是官网例子而已。

在网络上看到有的也是使用该组件,但是是较老的版本了,所以就自己写一个正在使用的。
当然,需要事件,其他的就在官网查看即可。因为我也才正在使用,具体的问题都是需要具体的分析才行。所以其余的就不在赘述。

使用中遇到的问题?

我使用ng2-admin的后台框架,在该框架中NgxEchartsModule,不能再AppModule.ts中引入。具体原因不详,猜测是由于ng2-admin导致的。

OK,到这里就结束了,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
详解angular笔记路由之angular-router
Sep 12 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
vue单页开发父子组件传值思路详解
May 18 Javascript
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
js实现橱窗展示效果
Jan 11 Javascript
vue实现移动端拖动排序
Aug 21 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 Javascript
JavaScript实现消消乐的源代码
Jan 12 Javascript
jquery学习笔记之无new构建详解
Dec 07 #jQuery
利用Node.js检测端口是否被占用的方法
Dec 07 #Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 #Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 #Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 #Javascript
react学习笔记之state以及setState的使用
Dec 07 #Javascript
React Native 截屏组件的示例代码
Dec 06 #Javascript
You might like
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
thinkphp autoload 命名空间自定义 namespace
2015/07/17 PHP
PHP的openssl加密扩展使用小结(推荐)
2016/07/18 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
2014/01/11 Javascript
使用jQuery制作基础的Web图片轮播效果
2016/04/22 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
JavaScript获取当前时间向前推三个月的方法示例
2017/02/04 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
vue项目关闭eslint校验
2018/03/21 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
element 动态合并表格的步骤
2020/12/31 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
python连接字符串的方法小结
2015/07/13 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
Python AutoCAD 系统设置的实现方法
2020/04/01 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
西雅图电动自行车公司:Rad Power Bikes
2020/02/02 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
党员岗位承诺书
2014/03/25 职场文书
2014年城管个人工作总结
2014/12/08 职场文书
小学体育组工作总结2015
2015/07/21 职场文书