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 相关文章推荐
javaScript - 如何引入js代码
Mar 09 Javascript
javascript编程起步(第四课)
Jan 10 Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
javascript suggest效果 自动完成实现代码分享
Feb 17 Javascript
javascript快速排序算法详解
Sep 17 Javascript
javascript针对不确定函数的执行方法
Dec 16 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
jQuery实现 上升、下降、删除、添加一行代码
Mar 06 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 Javascript
vue input标签通用指令校验的实现
Nov 05 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
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
2016/11/01 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
2017/04/23 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
微信小程序开发之路由切换页面重定向问题
2018/09/18 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
webpack4实现不同的导出类型
2019/04/09 Javascript
Layui数据表格 前后端json数据接收的方法
2019/09/19 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python提示No module named images的解决方法
2014/09/29 Python
深入解析Python中的urllib2模块
2015/11/13 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
python flask实现分页的示例代码
2018/08/02 Python
Python中Numpy mat的使用详解
2019/05/24 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
PYTHON实现SIGN签名的过程解析
2019/10/28 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
pytorch中nn.Conv1d的用法详解
2019/12/31 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
挪威手表购物网站:Klokker
2016/09/19 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
主题党日活动总结
2014/07/08 职场文书
公司优秀员工推荐信
2015/03/24 职场文书