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