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图表的更多相关文章

  1. Vue如何使用动态刷新Echarts组件

    这次给大家带来Vue如何使用动态刷新Echarts组件,Vue使用动态刷新Echarts组件的注意事项有哪些,下面就是实战案例,一起来看一下. 需求背景:dashboard作为目前企业中后台产品的“门 ...

  2. echarts图表第一个案例

    1.action中获取到数据 @Override public String execute() throws Exception { List<Student> find = echar ...

  3. echarts图表标签(axisLabel)折行

    在项目中遇到了一个echarts图表标签过长需折行的需求,so引出这篇总结,啦啦啦有帮助就多多支持啦,撒花撒花撒花~~~~ 在此不对echarts其他用法做解释,详细见echarts文档(点击前往) ...

  4. ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法

    来源于:http://www.ithao123.cn/content-3751220.html 格式化之所以存在,主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化,便于用户更好地理解内 ...

  5. Echarts图表控件使用总结2(Line,Bar)—问题篇

    Echarts图表控件使用总结1(Line,Bar):http://www.cnblogs.com/hanyinglong/p/Echarts.html 1.前言 a.前两天简单写了一篇在MVC中如何 ...

  6. ***ECharts图表入门和最佳实践

    ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...

  7. ASP.NET MVC + ECharts图表案例

    废话不多说直接讲讲今天要做的事. 利用微软爸爸的MVC框架结合百度的良心产品ECharts图表进行动态图表的生成,本文以柱状图为例. ECharts下载以及相关文档:http://echarts.ba ...

  8. 怎样把echarts图表做成响应式的

    如果想要把echarts图表给做成响应式的那么就应该用rem 单位,给图表的外围容器设置rem 单位,然后调用jquery 的resize方法,$(window).resize(function(){ ...

  9. Echarts图表统计学习

    史上最全的Echarts图表学习文档 http://echarts.baidu.com/doc/doc.html 勤加练习,多做总结! http://www.stepday.com/topic/?79 ...

随机推荐

  1. mysql 使用service mysqld start 提示未识别服务 进入/etc/rc.d/init.d 下面未发现有mysqld解决方法

    1.执行whereis mysql会有如下打印: mysql: /usr/bin/mysql /usr/lib64/mysql /usr/include/mysql /usr/share/mysql ...

  2. Centos 6 can't found command subscription-manager

    [root@localhost ~]# subscription-manager: command not found-bash: -bash:: command not found resoluti ...

  3. Git 基本应用

    微信公众号:Java修炼指南博客园:https://home.cnblogs.com/u/wuyx/CSDN: https://mp.csdn.net/简书:https://www.jianshu.c ...

  4. legend3---lavarel常用操作代码2

    legend3---lavarel常用操作代码2 一.总结 一句话总结: 对于王思cong被执法人的感悟:失意时 莫心伤,得意时 莫膨胀 1.lavarel自动事务? DB::transaction方 ...

  5. C++ STL copy copy_backward

    #include <iostream>#include <algorithm>#include <vector>#include <functional> ...

  6. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_8.RabbitMQ研究-工作模式-发布订阅模式-生产者

    Publish/subscribe:发布订阅模式 发布订阅模式: 1.每个消费者监听自己的队列. 2.生产者将消息发给broker,由交换机将消息转发到绑定此交换机的每个队列,每个绑定交换机的队列都将 ...

  7. laravel中的管道设计模式

    转自 http://laravelacademy.org/post/3088.html

  8. android之Framework问题总结:

    移动开发知识体系总章(Java基础.Android.Flutter) Android Handler消息机制 . Android中为什么主线程不会因为Looper.loop里的无限循环ANR? 1.1 ...

  9. webdriervAPI(CSS定位元素)

    from  selenium  import  webdriver driver  =  webdriver.Chorme() driver.get("http://www.baidu.co ...

  10. 【转】TCP/IP网络协议各层首部

    ​ 数据包封装流程(逐层封装,逐层解封) 二层帧(二层帧中目的地址6个字节,源地址6个字节,长度/类型2个字节,二层帧共18个字节) ip头部(ip头部20字节) tcp头部(tcp头部20个字节): ...