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

2026-04-06 14:55:56

要求

选项卡每切换一次，就加载对应的一个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();
 }

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Angular+ionic实现折叠展开效果的示例代码

1,html中 <ion-item> <div class="middle-content-order"> <div class="middle-order-icon"> <ion-icon name="chevron-up-outline" class="up-gray" item-right *ngIf="!isShow" (click)="isSho
ionic使用angularjs表单验证（模板验证）

1什么是模板验证顾名思义模板验证就是通过一些angularjs的属性来在html标签中验证,为了往模板驱动表单中添加验证机制,你要添加一些验证属性,就像原生的 HTML 表单验证器. Angular 会用指令来匹配这些具有验证功能的指令.每当表单控件中的值发生变化时,Angular 就会进行验证,并生成一个验证错误的列表(对应着 INVALID 状态)或者 null(对应着 VALID 状态). 2示例这是我写的一个小demo,这种验证方式无需写js代码全部在标签里使用angularjs的
ionic4+angular7+cordova上传图片功能的实例代码

前言 ionic是一个垮平台开发框架,可通过web技术开发出多平台的应用.但只建议开发简单应用.复杂的应用需要用到许多cordova插件,而cordova插件的更新或者移动平台的更新很可能导致插件的不可用,维护升级成本较高. 安装插件安装插件Image Picker $ ionic cordova plugin add cordova-plugin-telerik-imagepicker $ npm install @ionic-native/image-picker 安装插件File Tra
三步实现ionic3点击退出app程序

本文实例为大家分享了ionic3点击退出app程序的具体代码,供大家参考,具体内容如下其实也很简单.大概分为三步 1.tabs.ts文件需要声明一下 @ViewChild('mainTabs') tabs:Tabs;//声明tabs组件(<ion-tabs #mainTabs >) 2.app.component.ts文件 @ViewChild('myNav') nav: Nav;//声明根组件(<ion-nav #myNav [root]="rootPage"&g
ionic+html5+API实现双击返回键退出应用

使用ionic+MUI联合开发app,鉴于ionic单方面实现的双击返回键过于复杂,所以想出了使用ionic与html5+API一起使用实现双击返回键退出应用,单击返回键返回上层的功能. $scope.listenbackbutton = function() { document.addEventListener("plusready", onPlusReady, false); function onPlusReady() { plus.key.addEventListener(&
Cordova(ionic)项目实现双击返回键退出应用

Android原生项目实现双击返回键退出应用,是十分简单的,添加如下代码即可实现: //记录按键时间 private long exitTime; @Override public boolean onKeyDown(int keyCode, KeyEvent event) { if(keyCode == KeyEvent.KEYCODE_BACK){ exit(); } return super.onKeyDown(keyCode, event); } public void exit(){
ionic2.0双击返回键退出应用

最近才把ionic的版本更新到2.0,所以便想感受一下2.0版本带来的新体验. 看了官方网站以及网上的各种介绍后,才知道这2.0版本结合了TypeScript和ES6,和1.0+版本有很大的不同,所以在此记录下使用2.0版本开发应用的过程与代码.此文就是介绍在2.0版本双击返回键退出应用. 先在这说下我从更新后到现在的经验吧.ionic2.0的项目目录和以前不一样了,而且是在/app这个文件夹下开发的,html.scss和ts文件都在这里,生成一个页面需要的三个文件(html.scss.ts)是
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解

1.Ionic3.x 页面正向传值关于正向传值,上一篇文章里面有讲,具体可以看这里:http://www.jb51.net/article/136302.htm 2.Ionic3.x 页面 pop反向传值,主要有两种方式 1 .利用ES6提供 Promise 对象 2 利用Ionic3.x提供Event对象,观察者模式(publish/subscribe) 1)利用ES6提供 Promise 对象这边假设有两个页面A页面, B页面, 情景如下,A跳转B页面,在B页面返回A页面需要给A页面选回
基于Ionic3实现选项卡切换并重新加载echarts

要求选项卡每切换一次,就加载对应的一个echarts 图,要有一开始的动画效果效果如下: 注意点 1.echarts要想每次都能重新加载,需要移除"_echarts_instance_"属性,否则一切换选项卡,就再也加载不出来了 2.在ts 中获取html 页面元素,不能写在构造方法里,应该写在ionViewDidEnter()方法里 3.选项卡<ion-segment> 不要搭配[ngSwitch] 的方式,因为这种情况下,只能获取当前选项卡中的元素,未选中的选项卡里
基于JavaScript实现鼠标向下滑动加载div的代码

废话不多说了,关键代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new
基于dataset的使用和图片延时加载的实现方法

首先,先介绍一下关于javascript中dataset属性.. html5中可以使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放. 下面是元素应用data属性的一个例子: <div id="day-meal-expense" data-drink="tea" data-food="noodle" data-meal="lunch">$18.3</div> 要想获取某个属性的值,可以像下
基于element-ui封装可搜索的懒加载tree组件的实现

引言最近开发项目时遇到一个需求就是采用tree的方式展示以万为单位的数据,因为数据量大第一反应就是采用"懒加载"的方式实现,为了方便用户在庞大的数据量中快速定位到某个节点搜索功能也是必不可少的:因为采用"懒加载"数据,搜索当然也是远程搜索了:确定了需求当然第一时间就去网上找有没有小伙伴已经实现了相关组件,最后....,还是自己实现一个吧(由于公司采用的element-ui所以基于el-tree进行改造):[这只是自己实现的一种思路,希望大家多多指正] 1.懒加载树
vue 使用vant插件做tabs切换和无限加载功能的实现

样例: 1.创建vue项目,不再详述 2.引入vant 之前用过很多插件做这个功能,但是效果都不尽人意,出现各种问题,直到遇到vant这个插件,完美的解决了这些小问题,如有问题,欢迎联系我安装依赖 npm i vant -S 在main.js中引入 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 3.在页面中使用官方写的比我写的好多了,大家可以借鉴,看源代码可能比官方给的文档更直观官方文档我在文件中
基于Flutter制作一个吃豆人加载动画

目录效果图绘制静态吃豆人.豆豆.眼睛加入动画属性总结效果图国际惯例,先看效果图: 具体效果就是吃豆人会根据吃不同颜色的豆子改变身体的颜色. 绘制静态吃豆人.豆豆.眼睛首先,我们需要将这个静态的吃豆人绘制出来,我们可以把吃豆人看做是一个实心圆弧,豆豆和眼睛就是一个圆. 关键代码: //画头 _paint ..color = color.value ..style = PaintingStyle.fill; var rect = Rect.fromCenter( center: Off
springboot动态加载Echarts柱状图

本文实例为大家分享了springboot动态加载Echarts柱状图的具体代码,供大家参考,具体内容如下第一次写博客,废话不多说,直接上代码后台代码 @RequestMapping("/rcbchart") @ResponseBody private String dwcb(@RequestParam("scrq1") String scrq1,@RequestParam("scrq2") String scrq2, @RequestPara
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)

ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 效果演示源码下载本文将结合实例讲解如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据,我们以中国地图为例,展示去年(2015年)我国各省份GDP数据.通过异步请求php,读取mysql中的数据,然后展示在地图上,因此本文除了你掌握前端知识外,还需要你了解PHP以及MySQL方
详解基于angular路由的requireJs按需加载js

最近终于不忙了!!有时间沉淀一下之前学到的angular东东!! angular路由想必大家已经不陌生了!(陌生的去看我之前那篇手把手教你配置angular路由!) angular路由作为单页面应用,切换页面的时候都是一个页面,所以切换controller和按需加载控件js就成了大问题!!折腾了我半天啊,angular-route内置的办法也没有解决这个问题,最终我是用requireJs解决的这个问题!!上代码! 1.首先引入requireJs,并且在它的下面用闭包写配置 requirejs([
基于AngularJS实现页面滚动到底自动加载数据的功能

要实现这个功能,可以通过 https://github.com/sroze/ngInfiniteScroll 这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序 http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改

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

相关推荐

随机推荐