Angular7如何动态刷新Echarts图表
1 概述
- echarts是百度的开源图表插件
- Angular中引入echarts网上教程很多
- Angular引入echarts,并使用动态刷新
2 安装
请参考大神的博客:https://blog.csdn.net/qq_35321405/article/details/80340969
3 参考DEMO
var myChart = echarts.init(document.getElementById('main'));
setInterval(function () {
for (var i = 0; i < 5; i++) {
data.shift();
data.push(randomData());
}
// 需要获取到echarts图表实例
myChart.setOption({
series: [{
data: data
}]
});
}, 1000);
4 Anuglar动态刷新
(1)app.component.html
<div #myCharts echarts [options]="options"></div>
(2)app.component.ts
@Component({
selector: 'app',
templateUrl: './app.component.html'
})
export class AppComponent implements OnInit, OnDestroy {
@ViewChild('myCharts') myCharts: ElementRef;
options;
private timer;
constructor(private es: NgxEchartsService){
var data = [];
var now = +new Date(1997, 9, 3);
var oneDay = 24 * 3600 * 1000;
var value = Math.random() * 1000;
for (var i = 0; i < 1000; i++) {
data.push(this.randomData());
}
this.options = {
title: {
text: '动态数据 + 时间坐标轴'
},
tooltip: {
trigger: 'axis',
formatter: function (params) {
params = params[0];
var date = new Date(params.name);
return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
},
axisPointer: {
animation: false
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [{
name: '模拟数据',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data
}]
};
}
ngOnInit() {
this.timer = setInterval(function () {
for (var i = 0; i < 5; i++) {
data.shift();
data.push(randomData());
}
this.es.getInstanceByDom(this.myCharts.nativeElement).setOption({
series: [{
data: data
}]
});
}, 1000);
}
ngOnDestroy() {
if (this.timer) clearInterval(this.timer);
}
private randomData() {
now = new Date(+now + oneDay);
value = value + Math.random() * 21 - 10;
return {
name: now.toString(),
value: [
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
Math.round(value)
]
}
}
}
5 总结
(1)获取dom对象
- Js使用document.getElementById("#id")获取dom元素
- Angular使用模板和@ViewChild("#id")获取ElementRef,ElementRef.nativeElement就可以得到dom元素了
(2)获取echarts实例对象
- Js使用了echarts.init方法返回了新的实例,实际上echarts.getInstanceByDom(dom对象)可以获取一个已经实例化的echarts对象
- Angular注入NgxEchartsService服务,它等同于js的echarts,即它有getInstanceByDom方法,接下来和Js操作就一样了
Angular7如何动态刷新Echarts图表的更多相关文章
- Vue如何使用动态刷新Echarts组件
这次给大家带来Vue如何使用动态刷新Echarts组件,Vue使用动态刷新Echarts组件的注意事项有哪些,下面就是实战案例,一起来看一下. 需求背景:dashboard作为目前企业中后台产品的“门 ...
- echarts图表第一个案例
1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...
- echarts图表标签(axisLabel)折行
在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...
- ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法
来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...
- Echarts图表控件使用总结2(Line,Bar)—问题篇
Echarts图表控件使用总结1(Line,Bar):http://www.cnblogs.com/hanyinglong/p/Echarts.html 1.前言 a.前两天简单写了一篇在MVC中如何 ...
- ***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
- ASP.NET MVC + ECharts图表案例
废话不多说直接讲讲今天要做的事. 利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成,本文以柱状图为例. ECharts下载以及相关文档:http://echarts.ba ...
- 怎样把echarts图表做成响应式的
如果想要把echarts图表给做成响应式的那么就应该用rem 单位,给图表的外围容器设置rem 单位,然后调用jquery 的resize方法,$(window).resize(function(){ ...
- Echarts图表统计学习
史上最全的Echarts图表学习文档 http://echarts.baidu.com/doc/doc.html 勤加练习,多做总结! http://www.stepday.com/topic/?79 ...
随机推荐
- Redis | 一文轻松搞懂redis集群原理及搭建与使用
转载:https://juejin.im/post/5ad54d76f265da23970759d3 作者:SnailClimb 这里总结一下redis集群的搭建以便日后所需同时也希望能对你有所帮助. ...
- 【转】netty4.1.32 pipeline的添加顺序和执行顺序
原文:https://www.cnblogs.com/ruber/p/10186571.html 本文只想讨论一下pipeline的执行顺序问题,因为这个搞不明白就不知道先添加编码还是解码,是不是可以 ...
- 对官网vue事件修饰符串联的顺序如何理解?
官网有一个提醒:使用修饰符时,顺序很重要:相应的代码会以同样的顺序产生.因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent ...
- smarty建的mvc环境
================================搭建MVC结构================================基于MVC,解耦合 (高内聚,低耦合),优点:易维护.易扩 ...
- 一百三十五:CMS系统之UEditoe编辑器集成以及配置将图片上传到七牛
富文本编辑框,选择UEditor 下载地址:http://ueditor.baidu.com/website/download.html 使用说明:http://fex.baidu.com/uedit ...
- 一百三十一:CMS系统之轮播图上传图片功能
将七牛js放到common下 把获取uptoken的接口放到common视图中 把初始化七牛放到banners.js中 //初始化七牛$(function () { qiniujs.setUp({ ' ...
- Swift中添加标记(MARK)和警告(TODO FIXME)
//MARK: - 注释说明 //FIXME: - 表示此处有bug 或者要优化 //TODO: - 一般用于写到哪了 做个标记,让后回来继续 开启警告: 参考博客: http://blog.csd ...
- handlebars基础及循环使用示例
var source = "<p>Hello, my name is {{name}}. I am from {{hometown}}. I have " + &quo ...
- 分组卷积+squeezenet+mobilenet+shufflenet的参数及运算量计算
来一发普通的二维卷积 1.输入feature map的格式为:m * m * h1 2.卷积核为 k * k 3.输出feature map的格式为: n * n * h2 参数量:k * k * h ...
- 在谷歌中缓存下载视频离线观看,js代码
var download=function(urlInfo) { when(createFile(localFileName)) .then(function (fileInfo) { var dow ...