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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
js下获取div中的数据的原理分析
Apr 07 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
Mar 26 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
js如何准确获取当前页面url网址信息
Sep 13 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
jQuery实现的点击图片居中放大缩小功能示例
Jan 16 jQuery
vue store之状态管理模式的详细介绍
Jun 13 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 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
Terran建筑一览
2020/03/14 星际争霸
IIS6的PHP最佳配置方法
2007/03/19 PHP
Yii快速入门经典教程
2015/12/28 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
/etc/php-fpm.d/www.conf 配置注意事项
2017/02/04 PHP
PHP children()函数讲解
2019/02/03 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
禁止刷新,回退的JS
2006/11/25 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
微信小程序 九宫格实例代码
2017/01/21 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
JS实现放烟花效果
2020/03/10 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
Python实现模拟登录及表单提交的方法
2015/07/25 Python
python爬虫爬取网页表格数据
2018/03/07 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
生物专业个人自荐信范文
2013/11/29 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
先进人物事迹材料
2014/12/29 职场文书
Python实现信息管理系统
2022/06/05 Python