Angular使用echarts
安装
npm install echarts --save
npm install @types/echarts --save
基本使用
定义一个dom
<div id="chart" style="min-width: 1500px;min-height:800px;"></div>
定义对象
//数据
eChartDatas: any;
//图例
legends:any;//echart
echarts: any;
myChart: any;
获得echarts对象
// 基于准备好的dom,初始化echarts实例
this.echarts = require('echarts');
//只能初始化一次:https://www.echartsjs.com/api.html#echarts.init
if (this.myChart == null || this.myChart == undefined) {this.myChart = this.echarts.init(document.getElementById('chart') as HTMLDivElement);
}
多折线图生成
效果如图
//绘制chart
// 指定图表的配置项和数据
var option = {//标题title: {text: '监测数据统计图',// left: 'center'},//图例legend: {data: this.legends},tooltip: {trigger: 'axis',grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'time',splitLine: {show: false}},yAxis: {type: 'value',splitLine: {show: false}},series: []
};
//循环录入数据
this.eChartDatas.forEach(dataList => {option.series.push({name: dataList[0].tip,type: 'line',showSymbol: false,hoverAnimation: false,data: dataList});
});// 使用刚指定的配置项和数据显示图表。
this.myChart.clear();
this.myChart.setOption(option);
示例代码
示例代码
参考资料
Is it possible to use ECharts Baidu with Angular 2 and TypeScript
Ionic2系列——在Ionic2中使用ECharts
echarts demo
echarts 多折线demo
转载于:https://www.cnblogs.com/Lulus/p/10662093.html
Angular使用echarts相关推荐
- 关于做angular引入echarts图表、时间轴
1. echarts图: 1> 首先在项目中需要安装一下 npm install echarts --save 2> 然后再引入到项目angular.json的scripts中 " ...
- Java项目:销售团队后台管理系统(java+SpringBoot+FreeMarker+bootstrap+echarts+mysql)
源码获取:博客首页 "资源" 里下载! 项目介绍 该项目为后管系统,主要功能包括: 看板.业务机会管理.客户管理.联系人管理.我的日报.团队日报.主数据管理:组织架构管理:系统管理 ...
- IONIC使用echarts制作曲线图、柱状图、以及饼形图
先看效果 曲线图 ...
- 前端培训班出身——吐槽下16年的艰辛
一个人的成长,伴随着每一个人经历的多少,经验积累的多少,也就是资本的丰厚度,然后才会获得相应的回报. 为何走上程序猿这条不归路 2016年4月,生活三年的青岛,春暖花开的季节,相对于我们这届大三即将毕 ...
- Angular 项目中使用 ECharts 图表示例
最近项目需要用到echarts图表,但网上关于结合angular使用不多,而且总是导入报错,关于我用的版本做一个总结: (angular v6.0.9,echarts v4.1.0,@types/ec ...
- Angular项目中使用echarts中国地图
首先要在Angular项目中安装echarts的依赖: npm install echarts --save npm install ngx-echarts --save 第二.在创建包含地图的Ang ...
- 在一个html加载多个echarts,Echarts一个页面加载多个图表及图表自适应
Echarts一个页面加载多个图表及图表自适应 模块化加载 //入口 require.config({ paths: { echarts: 'http://echarts.baidu.com/buil ...
- 【React自制全家桶】一、Webstrom+React+Ant Design+echarts搭建react项目
前言 一.React是Facebook推出的一个前端框架,之前被用于著名的社交媒体Instagram中,后来由于取得了不错的反响,于是Facebook决定将其开源.出身名门的React也不负众望,成功 ...
- php 引入echarts路径,angular4中引入echarts的方法(代码示例)
本篇文章给大家带来的内容是关于angular4中引入echarts的方法(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.安装ngx-echarts npm insta ...
- echarts 环形图中间添加html,echarts配置一个中间显示文字的环形图
先贴一张效果图 1.导包 我没有用什么框架,直接引入echarts.min.js文件,代码如下: 注意这样引入不要放在header标签里,会阻塞html渲染,导致报错. 2.给echarts一个盒子 ...
最新文章
- JavaScript实时更新中国标准时间
- WINCE的FFMPEG交叉编译环境搭建
- 安装完matlab7.0但无法运行
- (全部)2008重磅出击——微软Windows Server 2008实战攻略系列
- Waveform Audio 驱动(Wavedev2)之:WAV API模拟
- RabbitMQ 下载安装配置_集群高可用篇_02
- 第5章 高效的多线程日志
- 【免费毕设】基于jsp的新闻发布系统(论文)
- php用哪个稳定版本linux系统,PHP的版本选择
- QT 的信号与槽机制介绍(转载)
- 三个数比较大小函数调用c语言,C语言程序系列第四弹–max函数判断三个数的大小...
- java 求arctan()
- AES 对称加密算法
- 微服务失败重试(2)AWS 消息服务选型对照表
- pyqt5 制作壁纸切换工具实例 第一章
- 手机沙盒隔离软件_x8沙箱官网下载-X8沙箱(隔离运行双开助手)下载v0.6.8.8-cn 安卓版-西西软件下载...
- [Hox库状态管理思考 二] 类实现组件的数据订阅
- 区块链:对链式结构型 PoS 系统的 “虚假权益” 攻击
- 【龟兔赛跑: 1、总里程100米 2、兔子每秒跑5米,每20米要休息2秒 3、乌龟每秒钟4米,不休息 4、谁先到达终点,比赛结束】
- 【好词好段摘抄】【转载】
热门文章
- GALGAME 剧本提取工具
- node_modules/css-loader?{sourceMap:true}!./node_modules/vue-loader/lib/style-compiler?报错问提解决方案
- var a=1和var a =b的区别
- MyEclipse8.5中的可视化界面JTable和JComboBox应用,及常用方法
- 不同加密算法的国际标准与国标
- Xcode给应用签名的设置
- MAC读写NTFS移动硬盘的解决办法
- BAT中删除目录,如何不显示删除的文件
- 安装.Net Framework提示:无法建立到信任根颁发机构的证书链
- LINUX获得当前用户名