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