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的值为一个数组,想着通过修改数组来动态更新图表,但是没变 化,后来发觉是因为图表数据会和之前的合并 看官方的 ...
随机推荐
- Linux 安装并配置zsh
1. 安装zsh,配置agnoster主题 1.1 安装zsh $ sudo apt-get install -y zsh 1.2 安装oh-my-zsh $ sh -c "$(curl - ...
- 01-Django 简介
一.MVC框架(模型-视图-控制器缩写,软件的构建模式) 一种软件设计典范,用一种业务逻辑.数据.界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需 ...
- linux下C/C++编译时系统搜索 include 和 链接库 文件路径的指定
C/C++程序在linux下被编译和连接时,GCC/G++会查找系统默认的include和link的路径,以及自己在编译命令中指定的路径.自己指定的路径就不说了,这里说明一下系统自动搜索的路径. ...
- CentOS7 安装 anaconda
Anaconda是一个开源的Python发行版本,可以帮助我们更方便地配置Python环境. 如果只需要某些包,或者需要节省带宽或存储空间,也可以使用Miniconda这个较小的发行版 0. 开始前 ...
- ASP.NET开发实战——(七)ASP.NET与数据库
在之前的文章中介绍了使用ASP.NET MVC来开发一个博客系统,并且已将初具雏形,可以查看文章列表页面,也可以点击文章列表的其中一篇文章查看详情,这已经完成了最开始需求分析的读者的查看列表和查看文章 ...
- Paper | Non-Local ConvLSTM for Video Compression Artifact Reduction
目录 1. 方法 1.1 框图 1.2 NL流程 1.3 加速版NL 2. 实验 3. 总结 [这是MFQE 2.0的第一篇引用,也是博主学术生涯的第一篇引用.最重要的是,这篇文章确实抓住了MFQE方 ...
- leetcode 236. 二叉树的最近公共祖先LCA(后序遍历,回溯)
LCA(Least Common Ancestors),即最近公共祖先,是指在有根树中,找出某两个结点u和v最近的公共祖先. 题目描述 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先. 百度百 ...
- 十、自定义ThreadPoolExecutor线程池
自定义ThreadPoolExecutor线程池 自定义线程池需要遵循的规则 [1]线程池大小的设置 1.计算密集型: 顾名思义就是应用需要非常多的CPU计算资源,在多核CPU时代,我们要让每一个CP ...
- 【redis】redis异常-MISCONF Redis is configured to save RDB snapshots
使用redis报错: MISCONF Redis is configured to save RDB snapshots, but it is currently not able to persis ...
- Caused by: java.lang.IllegalArgumentException: Could not resolve placeholder 'jdbc.username' in string value "${jdbc.username}"
1.启动dubbo的引用dubbo服务时候报下面这个错误,这是由于去找dubbo的发布服务未找到报的错误,所以先启动dubbo的发布服务即可. [INFO] Scanning for projects ...