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 {

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);}
}
...
}

转载于:https://www.cnblogs.com/lucky-heng/p/11260685.html

ngx-echarts 图表数据动态更新相关推荐

flex图表数据动态更新效果示例
<?xml version="1.0"?>  <mx:Appli ...
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理
Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理目录 Vue 之 echarts 图表数据可视化常用的一些图表/动态图表/3D图表的简单整理一.简单介绍二. ...
微信小程序循环显示多个Echarts图表，动态渲染数据
需求:需要在微信小程序中循环显示多个Echarts图表,动态渲染Echarts数据. 经查询,选择使用echarts插件. 在echarts官网中获取ec-canvas组件,放入至微信小程序中 1.w ...
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...
Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一.生成项目及安装插件 # 安装 Vue Cli npm install vue-cli -g# 初始化项目 vue init webpack vue-china-map# 切到目录下 cd vue- ...
Echarts图表数据变动后重新渲染
在Echarts图表数据发生变化时,经常需要重新渲染表格.官方文档中有一个选项,一直忘记记录,所以在这里记录一下. 前言:之前使用echarts折线图时,先是加载十条数据,后面再次加载一条数据发现页面 ...
Android零基础入门第44节：ListView数据动态更新
2019独角兽企业重金招聘Python工程师标准>>> 经过前面几期的学习,关于ListView的一些基本用法大概学的差不多了,但是你可能发现了,所有ListView里面要填充的数据 ...
python动态图形_利用matplotlib实现根据实时数据动态更新图形
我就废话不多说了,直接上代码吧! from time import sleep from threading importThread import numpy as np import matplo ...
将echarts图表数据导出成表格
这次开发,产品让实现echarts图表上加个导出按钮,需要导出成excel表格.如图所示: 开始一点思路都没有,百度了之后找到一个我个人觉得很不错的方法.上代码: 首先肯定是写按钮,给按钮加点击导出事 ...

ngx-echarts 图表数据动态更新

ngx-echarts 图表数据动态更新相关推荐

最新文章

热门文章