ngx-echarts响应式图表

一、代码

　　html代码

<!-- html -->
<nz-card   style="background-color: #0e0b2a;border: 0px;color: #8cc5fe;min-height: 180px; 100%;height: 100%;">
    <div style="padding: 4px 12px;height: 200px;">
        <label>
                {{title}}
        </label>
        <div echarts id="powerline" [options]="option" (chartInit)="onChartInit($event)"   [loading]="isLoading" [loadingOpts]="loadingOpts" [autoResize]="'true'"  style="position: relative;left: 4px;-webkit-tap-highlight-color: transparent;user-select: none;overflow-y: hidden; 100%;height: 100%;"  class="demo-chart"></div>
    </div>
</nz-card> 

　　ts代码

import { Component, OnInit, Input, SimpleChanges, HostListener, ElementRef } from '@angular/core';
import * as echarts from 'echarts';
import { fromEvent } from 'rxjs';

@Component({
  selector: 'app-powerline',
  templateUrl: './powerline.component.html',
  styleUrls: ['./powerline.component.css']
})
export class PowerlineComponent implements OnInit {
  @Input() title:string;
  @Input() value:any;

 

  public option:any;
  public  echartsInstance: any;

  //时间轴
  private timeline_data:any;
  //功率曲线轴
  private power_data:any;

  //自定义监听事件
  private pageResize:any;
  constructor(private el:ElementRef) { 
    //监听窗口resize事件，调用重绘图表方法，重新绘图
    this.pageResize = fromEvent(window, 'resize').subscribe(() => {
        this.resizeChart();
    });
  }

  //ngx-echarts初始化，获得图表实例
  onChartInit(event) {
    this.echartsInstance = event;
　}


  //重新绘制图表
  resizeChart() {
    if (this.echartsInstance) {
      this.echartsInstance.resize();
    }
  }

  ngOnInit() {    
   
  }

  ngOnChanges(changes: SimpleChanges): void {
    // this.power_data = this.processPowerLineData();
    this.option = {
      title: {
          text: '',
      },
      tooltip: {
          trigger: 'axis'
      },
      legend: {
        data:['功率'],
        bottom :10,
      },
      grid:{
        x:35,
        y:25,
        x2:30,
        y2:50,
        borderWidth:1
      },
      toolbox: {
          show: false,
          feature: {
              magicType: {show: false, type: ['stack', 'tiled']},
              saveAsImage: {show: false}
          }
      },
      xAxis: {
          name:'时间',
          type: 'category',
          nameGap :6,
          nameTextStyle :{
            color :'#364c64',
          },
          boundaryGap: false,
          axisLine :{
              show:true,
              lineStyle :{
                  color:'#083b73',
                  width :0,
                  //shadowOffsetY :10,
              },
          },
          axisTick :{
              show:false,  
          },
          splitLine :{
              show:false,
          },
          axisLabel:{
             color :'#364c64' ,
             
          },
          data: this.processTimeLineData(),
      },
      yAxis: [{
          type: 'value',
          name:'功率（KW）',
          max:1000,
          nameTextStyle :{
            color :'#364c64',
          },
          axisLine :{
              show:true,
              lineStyle :{
                  color:'#19193f',
                  width :2,
                  //shadowOffsetY :10,
              },
          },
          axisTick :{
              show:false,  
          },
          splitLine :{
              show:false,
          },
          axisLabel:{
            color :'#364c64' ,
            margin:35,
            textStyle: {
                     align:'left',
                     // baseline:'left',
                     // left:-40,
             }
             
          },
          
      },{
          type: 'value',
          name:'',
          max:2500,
          axisLine :{
              show:true,
              lineStyle :{
                  color:'#19193f',
                  width :2,
              },
          },
          axisTick :{
              show:false,  
          },
          splitLine :{
              show:false,
          },
          axisLabel:{
             color :'#22a0f3' ,
             
          },
          
      }],
      series: [{
          name: '功率',
          type: 'line',
          symbol: 'none',
          itemStyle :{
              show: false,
              color :'#22a0f3',
              borderWidth :1,
          },
          lineStyle :{
            color:'#22a0f3',  
            //type:'dashed',
          },
          smooth: true,
          data:this.processPowerLineData(),
        //   data:this.power_data,
        //   data: [300, 590, 350, 790, 360, 550, 450,300, 590, 350, 790,300, 590, 350, 790, 360, 550, 450,300, 590, 350,300, 590,580]
      }]
    };
    
}


  //处理功率曲线时间轴数组
  processTimeLineData(){
    const _self=this;
    _self.timeline_data = [];
    if(_self.value){
        if(0 != _self.value.length){
            _self.value.map(
                item =>{
                    let tem_a = item.time;
                    if(tem_a.length ==1){
                        tem_a = "0" + item.time + ":00";
                    }else if(tem_a.length == 2){
                        tem_a = item.time + ":00";
                    }else{
                        tem_a = item.time + ":00";
                    }
                    // parseInt(item.tem_a)
                    _self.timeline_data.push(tem_a);
                }
            ) 
        }else{
            _self.timeline_data = ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00',"24:00"];
        }
    }else{
        _self.timeline_data = ['00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00',"24:00"];
    }
    return _self.timeline_data;
}

  //处理功率曲线数据数组
  processPowerLineData(){
      const _self=this;
      _self.power_data = [];
      if(_self.value){
          if(0 != _self.value.length){
            _self.value.map(
                item =>{
                    _self.power_data.push(parseInt(item.powerp)) ;
                }
            )
          }else{
            _self.power_data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
          }
      }else{
        _self.power_data = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
      }
      return _self.power_data;
  }


  ngOnDestroy(): void {
      //销毁功率因数曲线的订阅事件
      if(this.pageResize){
        this.pageResize.unsubscribe();
      }
  }

}

二、截图

　　改变窗口大小前：

　　改变窗口大小后：

　　

 三、说明

　　注意：ngx-echarts想要图表能够随着窗口大小自适应，有两个关键点：

　　　　① 容纳图表的容器支持自适应

　　　　② 监听窗口的resize事件，当监听到变化时候，重新绘制图表