基于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 相关文章推荐
关于this和self的使用说明
Aug 01 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
JavaScript制作简易的微信打飞机
Mar 31 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
May 10 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
基于jquery实现五星好评
Nov 18 jQuery
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 Javascript
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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
PHP生成带有雪花背景的验证码
2008/09/28 PHP
php面向对象全攻略 (五) 封装性
2009/09/30 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
PHP的HTTP客户端Guzzle简单使用方法分析
2019/10/30 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
JavaScript Sort 表格排序
2009/10/31 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
jQuery中ajax的使用与缓存问题的解决方法
2013/12/19 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
jQuery设置Easyui校验规则(推荐)
2016/11/21 Javascript
JS验证不重复验证码
2017/02/10 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
微信小程序入门之绘制时钟
2020/10/22 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python中的面向对象编程详解(下)
2015/04/13 Python
Python骚操作之动态定义函数
2019/03/26 Python
在python中用url_for构造URL的方法
2019/07/25 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
自我鉴定范文
2013/11/10 职场文书
酒店管理求职信范文
2014/04/06 职场文书
好学生评语大全
2014/05/05 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
机器人总动员观后感
2015/06/09 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书