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