基于Ionic3实现选项卡切换并重新加载echarts


Posted in Javascript onSeptember 24, 2020

要求

选项卡每切换一次,就加载对应的一个echarts 图,要有一开始的动画效果

效果如下:

基于Ionic3实现选项卡切换并重新加载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();
 }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQUERY操作JSON实例代码
Feb 09 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
javascript实现简易聊天室
Jul 12 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 Javascript
vue实现禁止浏览器记住密码功能的示例代码
Feb 03 Vue.js
vue3.0生命周期的示例代码
Sep 24 #Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 #Javascript
Vue3不支持Filters过滤器的问题
Sep 24 #Javascript
jdk1.8+vue elementui实现多级菜单功能
Sep 24 #Javascript
vue实现日历表格(element-ui)
Sep 24 #Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 #Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 #Javascript
You might like
php中time()和mktime()方法的区别
2013/09/28 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
Thinkphp 框架扩展之标签库驱动原理与用法分析
2020/04/23 PHP
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
2016/05/16 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
Python实现注册登录系统
2017/08/08 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
python颜色随机生成器的实例代码
2020/01/10 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
酒店总经理欢迎词
2014/01/08 职场文书
创新型城市实施方案
2014/03/06 职场文书
房屋转让协议书范本
2014/04/11 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
运动会口号16字
2014/06/07 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
门卫岗位职责
2015/02/09 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
我爱我班主题班会
2015/08/13 职场文书
教师岗位说明书
2015/09/30 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书