Ionic 3 기반 옵션 전환 및 echarts 다시 불 러 오기

요구 하 다.
옵션 이 바 뀔 때마다 echarts 그림 을 불 러 옵 니 다.애니메이션 효 과 를 시작 해 야 합 니 다.
효 과 는 다음 과 같 습 니 다:

주의 점
1、echarts 매번 다시 불 러 오 려 면 제거 해 야 합 니 다"echarts_instance_"속성,그렇지 않 으 면 옵션 을 전환 하면 더 이상 불 러 올 수 없습니다.
2.ts 에서 html 페이지 요 소 를 가 져 옵 니 다.구조 방법 에 쓸 수 없습니다.ionViewDidEnter()방법 에 써 야 합 니 다.
3.옵션는[ngSwitch]방식 과 어 울 리 지 않 습 니 다.이 경우 현재 옵션 에 있 는 요소 만 가 져 올 수 있 기 때문에 선택 하지 않 은 옵션 에 있 는 요 소 를 가 져 올 수 없습니다.2 단계 ionView DidEnter()방법 에서 도 자 연 스 럽 게 얻 을 수 없습니다.(ionChange)사용 방식 을 맞 춰 야 합 니 다.
4.chart 를 전역 변수 로 직접 사용 할 수 없습니다.그러면 두 번 째 로 불 러 오 면 애니메이션 효과 가 없습니다.
코드 를 올리다
html 파일

<ion-header>
 <ion-navbar>
  <ion-title>  </ion-title>
 </ion-navbar>

</ion-header>

<ion-content padding>

  <ion-segment [(ngModel)]="choice" (ionChange)="segmentChanged($event)">
   <ion-segment-button value="choice1">
          
   </ion-segment-button>
   <ion-segment-button value="choice2">
          
   </ion-segment-button>
   <ion-segment-button value="choice3">
        
   </ion-segment-button>
   <ion-segment-button value="choice4">
        
   </ion-segment-button>
  </ion-segment>

  <div id="chartContainer" style="width: 100%; height: 300px;"></div>

</ion-content>
ts 파일

import {Component} from '@angular/core';
import * as echarts from 'echarts';

@Component({
 selector: 'page-data-area',
 templateUrl: 'area.html'
})
export class DataAreaPage {
 choice: string = "choice1";
 ec: any = echarts;
 chartContainer: any;

 constructor() {
 }

 clickChart1() {
  const chart1 = this.ec.init(this.chartContainer);
  chart1.setOption({
   series: {
    type: 'pie',
    data: [{
     name: 'A',
     value: 10
    }, {
     name: 'B',
     value: 20
    }, {
     name: 'C',
     value: 30
    }, {
     name: 'D',
     value: 40
    }]
   }
  }, true);
  this.chartContainer.removeAttribute("_echarts_instance_");
 }

 clickChart2() {
  const chart2 = this.ec.init(this.chartContainer);
  chart2.setOption({
   series: {
    type: 'pie',
    data: [{
     name: 'A',
     value: 10
    }, {
     name: 'B',
     value: 20
    }, {
     name: 'C',
     value: 30
    }]
   }
  }, true);
  this.chartContainer.removeAttribute("_echarts_instance_");
 }

 clickChart3() {
  const chart3 = this.ec.init(this.chartContainer);
  chart3.setOption({
   series: {
    type: 'pie',
    data: [{
     name: 'A',
     value: 10
    }, {
     name: 'B',
     value: 20
    }, {
     name: 'C',
     value: 30
    }, {
     name: 'D',
     value: 40
    }, {
     name: 'E',
     value: 50
    }]
   }
  }, true);
  this.chartContainer.removeAttribute("_echarts_instance_");
 }

 clickChart4() {
  const chart4 = this.ec.init(this.chartContainer);
  chart4.setOption({
   series: {
    type: 'pie',
    data: [{
     name: 'A',
     value: 10
    }, {
     name: 'B',
     value: 20
    }, {
     name: 'C',
     value: 30
    }, {
     name: 'D',
     value: 40
    }, {
     name: 'E',
     value: 50
    }, {
     name: 'F',
     value: 60
    }]
   }
  }, true);
  this.chartContainer.removeAttribute("_echarts_instance_");
 }

 segmentChanged(e) {
  if (e.value == "choice1") {
   this.clickChart1();
  } else if (e.value == "choice2") {
   this.clickChart2();
  } else if (e.value == "choice3") {
   this.clickChart3();
  } else if (e.value == "choice4") {
   this.clickChart4();
  }
 }

 ionViewDidEnter() {
  this.chartContainer = document.getElementById('chartContainer');
  this.clickChart1();
 }

}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기