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