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