基于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实现点击同时更改两个iframe的网址
Jul 01 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
基于Javascript实现二级联动菜单效果
Mar 04 Javascript
基于javascript制作微博发布栏效果
Apr 04 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
微信小程序实现聊天室
Aug 21 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
PHP生成月历代码
2007/06/14 PHP
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
php防止网站被刷新的方法汇总
2014/12/01 PHP
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
2016/06/15 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
2016/07/01 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
基于Bootstrap table组件实现多层表头的实例代码
2017/09/07 Javascript
vue2.0 + element UI 中 el-table 数据导出Excel的方法
2018/03/02 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
2018/08/12 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
小程序富文本提取图片可放大缩小
2020/05/26 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[40:03]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#1EHOME VS Archon
2016/03/02 DOTA
浅谈Python处理PDF的方法
2017/11/10 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
Python itertools.product方法代码实例
2020/03/27 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
房产买卖委托公证书
2014/04/04 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android