1 概述

  • echarts是百度的开源图表插件
  • Angular中引入echarts网上教程很多
  • Angular引入echarts,并使用动态刷新

2 安装

请参考大神的博客:https://blog.csdn.net/qq_35321405/article/details/80340969

3 参考DEMO

  1. var myChart = echarts.init(document.getElementById('main'));
  2. setInterval(function () {
  3. for (var i = 0; i < 5; i++) {
  4. data.shift();
  5. data.push(randomData());
  6. }
  7. // 需要获取到echarts图表实例
  8. myChart.setOption({
  9. series: [{
  10. data: data
  11. }]
  12. });
  13. }, 1000);

4 Anuglar动态刷新

(1)app.component.html

  1. <div #myCharts echarts [options]="options"></div>

(2)app.component.ts

  1. @Component({
  2. selector: 'app',
  3. templateUrl: './app.component.html'
  4. })
  5. export class AppComponent implements OnInit, OnDestroy {
  6. @ViewChild('myCharts') myCharts: ElementRef;
  7. options;
  8. private timer;
  9. constructor(private es: NgxEchartsService){
  10. var data = [];
  11. var now = +new Date(1997, 9, 3);
  12. var oneDay = 24 * 3600 * 1000;
  13. var value = Math.random() * 1000;
  14. for (var i = 0; i < 1000; i++) {
  15. data.push(this.randomData());
  16. }
  17. this.options = {
  18. title: {
  19. text: '动态数据 + 时间坐标轴'
  20. },
  21. tooltip: {
  22. trigger: 'axis',
  23. formatter: function (params) {
  24. params = params[0];
  25. var date = new Date(params.name);
  26. return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
  27. },
  28. axisPointer: {
  29. animation: false
  30. }
  31. },
  32. xAxis: {
  33. type: 'time',
  34. splitLine: {
  35. show: false
  36. }
  37. },
  38. yAxis: {
  39. type: 'value',
  40. boundaryGap: [0, '100%'],
  41. splitLine: {
  42. show: false
  43. }
  44. },
  45. series: [{
  46. name: '模拟数据',
  47. type: 'line',
  48. showSymbol: false,
  49. hoverAnimation: false,
  50. data: data
  51. }]
  52. };
  53. }
  54. ngOnInit() {
  55. this.timer = setInterval(function () {
  56. for (var i = 0; i < 5; i++) {
  57. data.shift();
  58. data.push(randomData());
  59. }
  60. this.es.getInstanceByDom(this.myCharts.nativeElement).setOption({
  61. series: [{
  62. data: data
  63. }]
  64. });
  65. }, 1000);
  66. }
  67. ngOnDestroy() {
  68. if (this.timer) clearInterval(this.timer);
  69. }
  70. private randomData() {
  71. now = new Date(+now + oneDay);
  72. value = value + Math.random() * 21 - 10;
  73. return {
  74. name: now.toString(),
  75. value: [
  76. [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
  77. Math.round(value)
  78. ]
  79. }
  80. }
  81. }

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. Java微信公众号开发梳理

    Java微信公众号开发梳理 现在微信公众平台的开发已经越来越普遍,这次开发需要用到微信公众平台.因此做一个简单的记录,也算是给那些没踩过坑的童鞋一些启示吧.我将分几块来简单的描述一下,之后会做详细的说 ...

  2. Java锁优化

    Java锁优化 应用程序在并发环境下会产生很多问题,通常情况下,我们可以通过加锁来解决多线程对临界资源的访问问题.但是加锁往往会成为系统的瓶颈,因为加锁和释放锁会涉及到与操作系统的交互,会有很大的性能 ...

  3. php-fpm(绕过open_basedir,结合ssrf)

    环境的安装->https://www.cnblogs.com/zaqzzz/p/11870489.html 1.nginx的畸形访问 因为安装的是php7.0,所以需要手动修改一下(版本低的时候 ...

  4. getBoundingClientRect使用指南

    getBoundingClientRect使用指南 author: @TiffanysBear 主要介绍getBoundingClientRect的基本属性,以及具体的使用场景和一些需要注意的问题. ...

  5. Swift 可选链

    可选链(Optional Chaining)是一种可以请求和调用属性.方法和子脚本的过程,用于请求或调用的目标可能为nil. 可选链返回两个值: 如果目标有值,调用就会成功,返回该值 如果目标为nil ...

  6. kotlin 泛型中类型投射

    fun main(arg: Array<String>) { var ints:Array<Int> = arrayOf(, , ) val any =Array<Any ...

  7. C之输入输出

    %d - int%ld – long (long int)%lld - long long%hd – short 短整型 (half int) %c - char%f - float%lf – dou ...

  8. 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_02-自定义查询页面-服务端-接口开发

    在Service中实现自定义查询 StringUtils.isNotEmpty()是这个包下的org.apache.commons.lang3.StringUtils; 再设置其他的条件 定义Exam ...

  9. [dart学习]第六篇:流程控制语句

    经过前面的基础知识了解学习,我们今天可以进入语句模块啦. dart主要有以下流程控制语句: if-else for循环 while和do-while循环 break和continue switch-c ...

  10. UIApearance的认识

    在参加工作之前一直不知道还有UIApearance的这个属性,并且不知道UIApearance是用来干嘛的,还不知道怎么用,工作之后,看公司代码中都会出现这个UIApearance,我决定学习学习,并 ...