ngx-echarts 图表数据动态更新
使用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 {
- echartsIntance: any;
- onChartInit(ec: any) {
- this.echartsIntance = ec;
- }
- ...
- // 获取数据之后更新图表
- getdata(): void {
- ...
- timeSeries, dataSeries = get() // 简写,从后端获取数据
- ...
- 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 图表数据动态更新的更多相关文章
- vue+vuex+axios+echarts画一个动态更新的中国地图
一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...
- highChart数据动态更新
highChart官网上通过ajax加载数据的例子 上面是第一次生成图表的时候使用 我想动态更新,在已经生成的图表上动态更新 chartBS.series[0].setData(sugarListDa ...
- Android零基础入门第44节:ListView数据动态更新
原文:Android零基础入门第44节:ListView数据动态更新 经过前面几期的学习,关于ListView的一些基本用法大概学的差不多了,但是你可能发现了,所有ListView里面要填充的数据都是 ...
- Android零基础入门第67节:RecyclerView数据动态更新
列表的数据往往会跟随业务逻辑不断刷新,所呈现出来的数据需要动态更新,那么RecyclerView是如何动态更新数据的呢? 之前在学习ListView的时候如果数据改变,需要调用notifyDataSe ...
- MFC编辑框接收数据动态更新与刷新方法代码示例-如何让编辑框内容实时更新
MFC编辑框接收数据动态更新与刷新方法代码示例-如何让编辑框内容实时更新 关键代码: //发送数据通知 //from txwtech@163.com LRESULT CCommSampleDlg::O ...
- 前端/h5/React D3.js实现根据数据动态更新图形/类似进度实时变化效果
最近接到一个需求,在满足规则下,实现类似这种展示效果,其实就是用图形反映数据(NK,一种干扰值) 运行后,它其实是不断在动的,每格都可能显示灰色或者彩色 这里一共是10个格子,每格代表一个范围边界,说 ...
- mui在tab选项卡中echarts图表不能动态随页面变化大小 只能固定大小
在mui tab选项卡中一直都不能让echarts动态变化大小 只能固定大小来展示图表,网上说的window.onresize = mycharts.resize;方法根本就没有效果,后面在https ...
- echarts图表数据信息动态获取
第一步准备一个json文件echarts.json(名字无所谓),用来模拟从后台获取数据 { "name":["直达","营销广告",&qu ...
- echarts动态加载数据无法更新series 无法更新图表
最近遇到一个Echarts图表无法动态更新数据的问题 最初我在option中设置series的值为一个数组,想着通过修改数组来动态更新图表,但是没变 化,后来发觉是因为图表数据会和之前的合并 看官方的 ...
随机推荐
- windows宿主机和docker容器设置挂载共享文件夹
docker容器内的程序经常需要访问.调用宿主机目录中的数据,每次都要导入导出非常麻烦费力. 接下来,一步步实现将宿主机的指定文件夹挂载到docker容器中. 1. 打开Oracle VM Vitua ...
- 【bzoj4154】(dfs序+kd-tree)
传送门 题意: 给出一颗以\(1\)为根的有根树,初始所有结点的颜色为\(1\). 之后有两个操作,一种是每次将距离\(a\)结点距离不超过\(l\)的所有儿子结点颜色染为\(c\):另一种是询问结点 ...
- 3、zabbix组件之间的关系
我们在安装zabbix的时候安装了四个软件:zabbix-server.zabbix-server-mysql.zabbix-web-mysql.zabbix-agent,那么这个四个软件之间有什么关 ...
- 利用java程序构造mysql测试数据
package com.baidu.mysql;import java.sql.*; public class MysqlJdbc { /** * @param args */ public stat ...
- 【BZOJ4816】[SDOI2017] 数字表格(莫比乌斯反演)
点此看题面 大致题意: 求\(\prod_{i=1}^n\prod_{j=1}^mf(gcd(i,j))\). 推式子 首先,按照套路我们枚举\(gcd\),得到: \[\prod_{d=1}^{mi ...
- Paper | Model-blind video denoising via frame-to-frame training
目录 故事 本文方法 流程 训练 实验 发表在2019年CVPR. 核心内容:基于Noise2Noise思想,这篇文章致力于无监督的视频盲去噪:是的,连噪声样本都不需要了. 这篇文章写作和概括太棒了! ...
- Leetcode 542:01 矩阵 01
Leetcode 542:01 矩阵 01 Matrix### 题目: 给定一个由 0 和 1 组成的矩阵,找出每个元素到最近的 0 的距离. 两个相邻元素间的距离为 1 . Given a matr ...
- Flink是如何实现exactly-once语义的
转自:https://blog.csdn.net/xianpanjia4616/article/details/86375224 最少一次:断了之后 重新执行 再去重 严格一次:根据检查点,再执行一次 ...
- jQuery 源码解析(七) jQuery对象和DOM对象的互相转换
jQuery对象是一个类数组对象,它保存的是对应的DOM的引用,我们可以直接用[]获取某个索引内的DOM节点,也可以用get方法获取某个索引内的DOM节点,还可以用toArray()方法把jQuery ...
- JVM的监控工具之jps
jps的功能和ps命令相似:可列出正在运行的虚拟机进程,并显示虚拟机执行主类(Main Class,main()函数所在的类)名称以及这些进程的本地虚拟机唯一ID(Local Virtual Mach ...