基于Ionic3實(shí)現(xiàn)選項(xiàng)卡切換并重新加載echarts
要求
選項(xiàng)卡每切換一次,就加載對(duì)應(yīng)的一個(gè)echarts 圖,要有一開(kāi)始的動(dòng)畫(huà)效果
效果如下:
注意點(diǎn)
1、echarts要想每次都能重新加載,需要移除"_echarts_instance_"屬性,否則一切換選項(xiàng)卡,就再也加載不出來(lái)了
2、在ts 中獲取html 頁(yè)面元素,不能寫(xiě)在構(gòu)造方法里,應(yīng)該寫(xiě)在ionViewDidEnter()方法里
3、選項(xiàng)卡<ion-segment> 不要搭配[ngSwitch] 的方式,因?yàn)檫@種情況下,只能獲取當(dāng)前選項(xiàng)卡中的元素,未選中的選項(xiàng)卡里的元素獲取不到,在第2步驟ionViewDidEnter() 方法里自然也是獲取不到。應(yīng)當(dāng)搭配(ionChange)使用方式
4、不能直接將chart作為全局變量,這樣的話第二次加載就沒(méi)有動(dòng)畫(huà)效果了
獻(xiàn)上代碼
html文件
<ion-header> <ion-navbar> <ion-title>區(qū)域</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"> 全省走勢(shì) </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(); } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Angular+ionic實(shí)現(xiàn)折疊展開(kāi)效果的示例代碼
- Cordova(ionic)項(xiàng)目實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用
- ionic+html5+API實(shí)現(xiàn)雙擊返回鍵退出應(yīng)用
- ionic2.0雙擊返回鍵退出應(yīng)用
- 三步實(shí)現(xiàn)ionic3點(diǎn)擊退出app程序
- ionic4+angular7+cordova上傳圖片功能的實(shí)例代碼
- ionic使用angularjs表單驗(yàn)證(模板驗(yàn)證)
- Angular 4.x+Ionic3踩坑之Ionic3.x pop反向傳值詳解
相關(guān)文章
javascript Array.prototype.slice的使用示例
javascript Array.prototype.slice除了常見(jiàn)的從某個(gè)數(shù)組中抽取出新的數(shù)組外,它還有一些其他的用法,下面就為大家講這些妙用2013-11-11通過(guò)js獲取div的background-image屬性
div的background-image這個(gè)屬性,只是設(shè)置它的url,下面為大家介紹下如何獲取它的background-image屬性,感興趣的朋友可以參考下2013-10-10BootStrap3學(xué)習(xí)筆記(一)之網(wǎng)格系統(tǒng)
本文給大家介紹BootStrap3網(wǎng)格系統(tǒng)的相關(guān)知識(shí),本文介紹的非常詳細(xì),具有參考借鑒價(jià)值,感興趣的朋友一起學(xué)習(xí)吧2016-05-05JS根據(jù)Unix時(shí)間戳顯示發(fā)布時(shí)間是多久前【項(xiàng)目實(shí)測(cè)】
小編最近在實(shí)現(xiàn)這樣的需求類(lèi)似微信朋友圈顯示發(fā)布時(shí)間為距離當(dāng)前時(shí)間多久之前這樣的功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2019-07-07純JavaScript實(shí)現(xiàn)的分頁(yè)插件實(shí)例
這篇文章主要介紹了純JavaScript實(shí)現(xiàn)的分頁(yè)插件,涉及javascript結(jié)合php動(dòng)態(tài)實(shí)現(xiàn)分頁(yè)效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07解決前端使用xlsx.js工具讀取excel遇到時(shí)間日期少43秒問(wèn)題
這篇文章主要給大家介紹了關(guān)于如何解決前端使用xlsx.js工具讀取excel遇到時(shí)間日期少43秒問(wèn)題的相關(guān)資料,xlsx.js是一種前端庫(kù),它可以使您使用JavaScript讀取、解析和導(dǎo)出電子表格文件,如Microsoft Excel,需要的朋友可以參考下2024-03-03