基于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 相关文章推荐
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
Html中JS脚本执行顺序简单举例说明
Jun 19 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
Jquery方式获取iframe页面中的 Dom元素
May 07 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
用Vue写一个分页器的示例代码
Apr 22 Javascript
jQuery中的类名选择器(.class)用法简单示例
May 14 jQuery
vue+element+Java实现批量删除功能
Apr 08 Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 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实现数组中出现次数超过一半的数字的统计方法
2018/10/14 PHP
PHP实现通过二维数组键值获取一维键名操作示例
2019/10/11 PHP
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
ECMAScript 5中的属性描述符详解
2015/03/02 Javascript
js闭包所用的场合以及优缺点分析
2015/06/22 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
2019/08/27 jQuery
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
如何构建 vue-ssr 项目的方法步骤
2020/08/04 Javascript
Python运行的17个时新手常见错误小结
2012/08/07 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
Django objects的查询结果转化为json的三种方式的方法
2018/11/07 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
前台文员岗位职责
2013/12/28 职场文书
社区端午节活动方案
2014/01/28 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
群众路线四风问题整改措施
2014/09/27 职场文书
2014年车间工作总结
2014/11/21 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
springboot拦截器无法注入redisTemplate的解决方法
2021/06/27 Java/Android
Python中requests库的用法详解
2022/06/05 Python
教你如何用cmd快速登录服务器
2022/06/10 Servers