ngx-echarts 图表数据动态更新

短命女 2021-11-09 14:42 464阅读 0赞

使用echarts绘制图表时，初次赋值数据正常展示，重新获取数据之后，图表没有跟着动态刷新。解决的办法是：

**html文件**

**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