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

html文件

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

conponent文件

...

const option = {
title: {
text: '图例'
},
tooltip: {
trigger: 'axis'
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '4%',
right: '3%',
bottom: '11%',
containLabel: true
},
xAxis: [
{
type : 'category',
boundaryGap : false,
data : []
}
],
dataZoom: [
{
type: 'slider',
height: '10%',
show: true,
xAxisIndex: [0],
realtime: true,
start: 0,
end: 100
},
{
type: 'inside',
realtime: true
}
],
yAxis: [
{
type : 'value'
}
],
series: []
}; export class yourComponent implements OnInit {
chartOption: any;
echartsIntance: any;

onChartInit(ec: any) {
this.echartsIntance = ec;
}
...
// 获取数据之后更新图表
getdata(): void {
...
timeSeries, dataSeries = get() // 简写,从后端获取数据    
    const item = [];
    item.push({
        type: 'line',
        smooth: 0.3,
        symbol: 'circle',
        symbolSize: 2,
        data: dataSeries
    });
    ...
this.chartOption = option;
this.chartOption.xAxis[0].data = timeSeries;
this.chartOption.series = item;
if (this.echartsIntance) {
this.echartsIntance.clear();
this.echartsIntance.setOption(this.chartOption, true);
}
}
...
}

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. OSI网络模型和网络连接设备

    OSI网络模型和网络连接设备 OSI模型 7层之间传输的协议传输单元(PDU)的专业叫法. 第7-5层(应用层)传输的pdu叫:data 第4层(传输层)传输的pdu叫:segment(数据段) 第3 ...

  2. 在linux中怎么查看错误日志

    cat或者tail -f命令 日 志 文 件 说 明 /var/log/message 系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一/var/log/secure 与安全 ...

  3. JDBC API浅析

    使用java开发数据库应用程序一般都需要用到四个接口:Driver.Connection.Statement.ResultSet 1.Driver接口用于加载驱动程序 2.Connection接口用于 ...

  4. 5-5 可视化库Seaborn-多变量分析绘图

      Parameters:¶ 参数 解释 变量 x,y,hue 数据集变量 变量名 date 数据集 数据集名 row,col 更多分类变量进行平铺显示 变量名 col_wrap 每行的最高平铺数 整 ...

  5. 【洛谷P4148】简单题(kd-tree)

    传送门 题意: 给出一个\(n*n\)的棋盘,现在有两种操作:一种是某个格子里的数字加上\(A\),另一种是询问矩阵和. 空间限制:\(20MB\),强制在线. 思路: 直接\(kd-tree\)来搞 ...

  6. Git之SSH公钥与私钥

    今天来探讨一下如何使用Git的操作,来进一步的实现代码的下载到本地,我原来也不是很明白git中生成公钥和私钥的作用,我一直在想,git里面你把自己的公钥发给了git的服务器,他是怎么判断的,每一次我换 ...

  7. web的前台、后台、前端、后端

    前台:呈现给用户的视觉和基本的操作.后台:用户浏览网页时,我们看不见的后台数据跑动.后台包括前端,后端.前端:对应我们写的html .javascript 等网页语言作用在前端网页.后端:对应jsp. ...

  8. luoguP2852 [USACO06DEC]Milk Patterns

    题意 显然如果有一个子串出现过\(k\)次,那么它必定是一个至少长为k的后缀序的\(LCP\),求出所有相邻的长为\(k-1\)的\(height\)数组的最小值,在其中取最大值即可 code: #i ...

  9. linux字体,bashrc的问题的解决

    0.查看文件 :set ff #查看文件类型 这里是fileformat=unix :set ff=dos 设置为dos模式, 也可以用 sed -i 's/$/\r/' :set ff=unix 设 ...

  10. 修改gradle中央仓库,加快jar包下载速度

    打开gradle项目的build.gradle文件 找到repositories,注释掉mavenCentral(),使用阿里云的仓库地址 repositories { //mavenCentral( ...