使用echarts绘制图表时,初次赋值数据正常展示,重新获取数据之后,图表没有跟着动态刷新。解决的办法是:

html文件

  1. <div echarts [options]="chartOption" (chartInit)="onChartInit($event)"></div>

conponent文件

  1. ...
  2.  
  3. const option = {
  4. title: {
  5. text: '图例'
  6. },
  7. tooltip: {
  8. trigger: 'axis'
  9. },
  10. toolbox: {
  11. feature: {
  12. saveAsImage: {}
  13. }
  14. },
  15. grid: {
  16. left: '4%',
  17. right: '3%',
  18. bottom: '11%',
  19. containLabel: true
  20. },
  21. xAxis: [
  22. {
  23. type : 'category',
  24. boundaryGap : false,
  25. data : []
  26. }
  27. ],
  28. dataZoom: [
  29. {
  30. type: 'slider',
  31. height: '10%',
  32. show: true,
  33. xAxisIndex: [0],
  34. realtime: true,
  35. start: 0,
  36. end: 100
  37. },
  38. {
  39. type: 'inside',
  40. realtime: true
  41. }
  42. ],
  43. yAxis: [
  44. {
  45. type : 'value'
  46. }
  47. ],
  48. series: []
  49. };
  50.  
  51. export class yourComponent implements OnInit {
chartOption: any;
  1. echartsIntance: any;
  2.  
  3. onChartInit(ec: any) {
  4. this.echartsIntance = ec;
  5. }
  6. ...
  7. // 获取数据之后更新图表
  8. getdata(): void {
  9. ...
  10. timeSeries, dataSeries = get() // 简写,从后端获取数据    
    const item = [];
    item.push({
        type: 'line',
        smooth: 0.3,
        symbol: 'circle',
        symbolSize: 2,
        data: dataSeries
    });
  1. ...
  2. this.chartOption = option;
  3. this.chartOption.xAxis[0].data = timeSeries;
  4. this.chartOption.series = item;
  5. if (this.echartsIntance) {
  6. this.echartsIntance.clear();
  7. this.echartsIntance.setOption(this.chartOption, true);
  8. }
  9. }
  10. ...
  11. }

ngx-echarts 图表数据动态更新的更多相关文章

  1. vue+vuex+axios+echarts画一个动态更新的中国地图

    一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...

  2. highChart数据动态更新

    highChart官网上通过ajax加载数据的例子 上面是第一次生成图表的时候使用 我想动态更新,在已经生成的图表上动态更新 chartBS.series[0].setData(sugarListDa ...

  3. Android零基础入门第44节:ListView数据动态更新

    原文:Android零基础入门第44节:ListView数据动态更新 经过前面几期的学习,关于ListView的一些基本用法大概学的差不多了,但是你可能发现了,所有ListView里面要填充的数据都是 ...

  4. Android零基础入门第67节:RecyclerView数据动态更新

    列表的数据往往会跟随业务逻辑不断刷新,所呈现出来的数据需要动态更新,那么RecyclerView是如何动态更新数据的呢? 之前在学习ListView的时候如果数据改变,需要调用notifyDataSe ...

  5. MFC编辑框接收数据动态更新与刷新方法代码示例-如何让编辑框内容实时更新

    MFC编辑框接收数据动态更新与刷新方法代码示例-如何让编辑框内容实时更新 关键代码: //发送数据通知 //from txwtech@163.com LRESULT CCommSampleDlg::O ...

  6. 前端/h5/React D3.js实现根据数据动态更新图形/类似进度实时变化效果

    最近接到一个需求,在满足规则下,实现类似这种展示效果,其实就是用图形反映数据(NK,一种干扰值) 运行后,它其实是不断在动的,每格都可能显示灰色或者彩色 这里一共是10个格子,每格代表一个范围边界,说 ...

  7. mui在tab选项卡中echarts图表不能动态随页面变化大小 只能固定大小

    在mui tab选项卡中一直都不能让echarts动态变化大小 只能固定大小来展示图表,网上说的window.onresize = mycharts.resize;方法根本就没有效果,后面在https ...

  8. echarts图表数据信息动态获取

    第一步准备一个json文件echarts.json(名字无所谓),用来模拟从后台获取数据 { "name":["直达","营销广告",&qu ...

  9. echarts动态加载数据无法更新series 无法更新图表

    最近遇到一个Echarts图表无法动态更新数据的问题 最初我在option中设置series的值为一个数组,想着通过修改数组来动态更新图表,但是没变 化,后来发觉是因为图表数据会和之前的合并 看官方的 ...

随机推荐

  1. windows宿主机和docker容器设置挂载共享文件夹

    docker容器内的程序经常需要访问.调用宿主机目录中的数据,每次都要导入导出非常麻烦费力. 接下来,一步步实现将宿主机的指定文件夹挂载到docker容器中. 1. 打开Oracle VM Vitua ...

  2. 【bzoj4154】(dfs序+kd-tree)

    传送门 题意: 给出一颗以\(1\)为根的有根树,初始所有结点的颜色为\(1\). 之后有两个操作,一种是每次将距离\(a\)结点距离不超过\(l\)的所有儿子结点颜色染为\(c\):另一种是询问结点 ...

  3. 3、zabbix组件之间的关系

    我们在安装zabbix的时候安装了四个软件:zabbix-server.zabbix-server-mysql.zabbix-web-mysql.zabbix-agent,那么这个四个软件之间有什么关 ...

  4. 利用java程序构造mysql测试数据

    package com.baidu.mysql;import java.sql.*; public class MysqlJdbc { /** * @param args */ public stat ...

  5. 【BZOJ4816】[SDOI2017] 数字表格(莫比乌斯反演)

    点此看题面 大致题意: 求\(\prod_{i=1}^n\prod_{j=1}^mf(gcd(i,j))\). 推式子 首先,按照套路我们枚举\(gcd\),得到: \[\prod_{d=1}^{mi ...

  6. Paper | Model-blind video denoising via frame-to-frame training

    目录 故事 本文方法 流程 训练 实验 发表在2019年CVPR. 核心内容:基于Noise2Noise思想,这篇文章致力于无监督的视频盲去噪:是的,连噪声样本都不需要了. 这篇文章写作和概括太棒了! ...

  7. Leetcode 542:01 矩阵 01

    Leetcode 542:01 矩阵 01 Matrix### 题目: 给定一个由 0 和 1 组成的矩阵,找出每个元素到最近的 0 的距离. 两个相邻元素间的距离为 1 . Given a matr ...

  8. Flink是如何实现exactly-once语义的

    转自:https://blog.csdn.net/xianpanjia4616/article/details/86375224 最少一次:断了之后 重新执行 再去重 严格一次:根据检查点,再执行一次 ...

  9. jQuery 源码解析(七) jQuery对象和DOM对象的互相转换

    jQuery对象是一个类数组对象,它保存的是对应的DOM的引用,我们可以直接用[]获取某个索引内的DOM节点,也可以用get方法获取某个索引内的DOM节点,还可以用toArray()方法把jQuery ...

  10. JVM的监控工具之jps

    jps的功能和ps命令相似:可列出正在运行的虚拟机进程,并显示虚拟机执行主类(Main Class,main()函数所在的类)名称以及这些进程的本地虚拟机唯一ID(Local Virtual Mach ...