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 闭包在封装函数时的简单分析
Nov 28 Javascript
JS正则表达式验证数字代码
Jan 28 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
js中获取jsp表单中radio类型的值简单实例
Aug 15 Javascript
巧用Javascript的逻辑运算符
Dec 02 Javascript
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
vue项目打包部署_nginx代理访问方法详解
Sep 20 Javascript
Javascript的this详解
Mar 23 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
JS如何定义用字符串拼接的变量
Jul 11 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者的疑难问答(1)
2006/10/09 PHP
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
PHP反射实际应用示例
2019/04/03 PHP
Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示例
2019/10/12 PHP
巧用局部变量提升javascript性能
2014/02/24 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
javascript 动态创建表格
2015/01/08 Javascript
js查找节点的方法小结
2015/01/13 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
JavaScript必看小技巧(必看)
2016/06/07 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
Vue的Class与Style绑定的方法
2017/09/01 Javascript
JavaScript基础进阶之数组方法总结(推荐)
2017/09/04 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
Vue.js构建你的第一个包并在NPM上发布的方法步骤
2019/05/01 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
Python探索之创建二叉树
2017/10/25 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Python解释器以及PyCharm的安装教程图文详解
2020/02/26 Python
周年庆典主持词
2014/04/02 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
教师考核评语
2014/04/28 职场文书
安全施工责任书
2014/08/25 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
综合测评个人总结
2015/03/03 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang
深入浅析React中diff算法
2021/05/19 Javascript
浅析Python中的套接字编程
2021/06/22 Python
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫