ngx-echarts 图表数据动态更新

最新推荐文章于 2021-05-04 15:14:18 发布

转载最新推荐文章于 2021-05-04 15:14:18 发布 · 578 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lucky-heng/p/11260685.html

文章标签：

#javascript #后端 #ViewUI

本文详细介绍了如何使用ECharts实现图表数据的动态更新。在数据变化时，通过清空图表并重新设置选项，确保图表实时反映最新数据，适用于各种需要实时数据展示的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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