ngx-echarts响应式图表

一、代码

　　html代码

 <!-- html -->
 <nz-card   style="background-color: #0e0b2a;border: 0px;color: #8cc5fe;min-height: 180px;width: 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;width: 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事件，当监听到变化时候，重新绘制图表