zoukankan      html  css  js  c++  java
  • 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);
        }
    }
    ...
    }
  • 相关阅读:
    设置 linux 下 firefox 的默认启动路径
    uvm读书笔记
    case不能复现,vcs 版本号不同带来的影响
    uvm override
    Jenkins 不执行构建里的命令
    sv 报语法错误
    linux 定时删除文件夹的的内容 (find && crontab 使用)
    学习:教材的本质
    学习的本质:认知深度
    演讲:给新仔讲过的商业内容
  • 原文地址:https://www.cnblogs.com/lucky-heng/p/11260685.html
Copyright © 2011-2022 走看看