您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
Ionic3实现选项卡切换并重新加载echarts的方法?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
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" ></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(); } }
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。