基于Ionic3实现选项卡切换并重新加载echarts
网络编程 2021-07-04 14:06www.168986.cn编程入门
这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
要求
选项卡每切换一次,就加载对应的一个echarts 图,要有一开始的动画效果
效果如下
注意点
1、echarts要想每次都能重新加载,需要移除"_echarts_instance_"属性,否则一切换选项卡,就再也加载不出来了
2、在ts 中获取html 页面元素,不能写在构造方法里,应该写在ionViewDidEnter()方法里
3、选项卡<ion-segment> 不要搭配[ngSwitch] 的方式,因为这种情况下,只能获取当前选项卡中的元素,未选中的选项卡里的元素获取不到,在第2步骤ionViewDidEnter() 方法里自然也是获取不到。应当搭配(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(); } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:Openlayers实现点闪烁扩散效果
下一篇:vue3.0生命周期的示例代码
编程语言
- 甘肃哪有关键词排名优化购买方式有哪些
- 甘肃SEO如何做网站优化
- 河南seo关键词优化怎么做电话营销
- 北京SEO优化如何做QQ群营销
- 来宾百度关键词排名:提升您网站曝光率的关键
- 卢龙关键词优化:提升您网站排名的策略与技巧
- 山东网站优化的注意事项有哪些
- 四川整站优化怎样提升在搜索引擎中的排名
- 疏附整站优化:提升网站性能与用户体验的全新
- 海南seo主要做什么工作售后服务要做到哪些
- 荣昌百度网站优化:提升您网站的搜索引擎排名
- 河北seo网站排名关键词优化如何做SEO
- 江西优化关键词排名推广售后保障一般有哪些
- 古浪SEO优化:提升你的网站可见性
- 西藏网站排名优化怎么把网站排名在百度首页
- 如何提升阳东百度快照排名:详尽指南