echarts的初始化和销毁dispose
容器节点被销毁以及被重建时
假设页面中存在多个标签页，
每个标签页都包含一些图表。
当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。
这样，当用户再选中这些标签页的时候，就会发现图表“不见”了。
本质上，这是由于图表的容器节点被移除导致的。
即使之后该节点被重新添加，图表所在的节点也已经不存在了。
正确的做法是，
在图表容器被销毁之后，
调用 echartsInstance.dispose 销毁实例，
在图表容器重新被添加后再次调用 echarts.init 初始化。
从上面这一句话，我们可以得出一个结论：
那就是有些时候我们在移除容器的时候，echarts可能展示不出来
那么解决的办法是：
调用 echartsInstance.dispose 销毁实例，
echartsInstance.dispose的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:400px; background: pink;"></div>
<div onclick="showHander()" class="zahsnhi">展示实例</div>
<div onclick="desHander()" class="xiaohui">销毁实例</div>
<script type="text/javascript">
// 初始化echarts
function xuanranInt() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
let index = 0;
var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'];
var data = [{
'name': '热点网格',
'value': 5600
}, {
'name': '大气污染',
'value': 3600
}, {
'name': '水质超标',
'value': 1500
}, {
'name': '在线超标',
'value': 2000
}, {
'name': '未知',
'value': 899
}, {
'name': '系统对接',
'value': 4000
}]
option = {
title: {
text: 'PieChart',
x: 'center',
y: 'center',
textStyle: {
fontSize: 20
}
},
tooltip: {
trigger: 'item'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: '5%',
top: 'center',
selectedMode: true,
icon: 'pin',
formatter: function (name) {
let title = ''
var total = 0;
var target;
var index;
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
title = data[i].label
index = i < 6 ? i : 5
}
}
return ` ${name} ${index} ${target}个`
}
},
label: { //去除饼图的指示折线label
normal: {
show: false,
position: 'inside',
formatter: "{b}:{d}%"
},
},
series: [{
type: 'pie',
center: ['50%', '50%'],
radius: ['50%', '70%'],
clockwise: true,
avoidLabelOverlap: true,
hoverOffset: 30,
emphasis: {
itemStyle: {
borderColor: '#f3f3f3',
borderWidth: 10
}
},
itemStyle: {
normal: {
borderColor: "#FFFFFF",
borderWidth: 1,
label: {
show: false,
},
labelLine: {
show: false
}
}
},
data: data,
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
// 调用
xuanranInt();
// 重新渲染echarts
function showHander() {
xuanranInt();
}
// 销毁实例
function desHander() {
var myChart = echarts.init(document.getElementById('main'));
// 销毁实例，销毁后实例无法再被使用。
// 在什么情况下需要调用该函数进行销毁当前的实例呢？
// 官方给的说明:在图表容器被销毁之后，调用 echartsInstance.dispose 销毁实例，
myChart.dispose();
}
</script>
</body>
</html>
效果图
echartsInstance.clear的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:400px; background: pink;"></div>
<div onclick="showHander()">展示实例</div>
<div onclick="desHander()">销毁实例</div>
<div onclick="qingkong()">清空当前实例</div>
<script type="text/javascript">
// 初始化echarts
function xuanranInt(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
let index = 0;
var colorList = ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'];
var data = [{
'name': '热点网格',
'value': 5600
}, {
'name': '大气污染',
'value': 3600
}, {
'name': '水质超标',
'value': 1500
}, {
'name': '在线超标',
'value': 2000
}, {
'name': '未知',
'value': 899
}, {
'name': '系统对接',
'value': 4000
}]
option = {
title: {
text: 'PieChart',
x: 'center',
y: 'center',
textStyle: {
fontSize: 20
}
},
tooltip: {
trigger: 'item'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: '5%',
top: 'center',
selectedMode: true,
icon: 'pin',
formatter: function (name) {
let title = ''
var total = 0;
var target;
var index;
for (var i = 0, l = data.length; i < l; i++) {
if (data[i].name == name) {
target = data[i].value;
title = data[i].label
index = i < 6 ? i : 5
}
}
return ` ${name} ${index} ${target}个`
}
},
label: { //去除饼图的指示折线label
normal: {
show: false,
position: 'inside',
formatter: "{b}:{d}%"
},
},
series: [{
type: 'pie',
center: ['50%', '50%'],
radius: ['50%', '70%'],
clockwise: true,
avoidLabelOverlap: true,
hoverOffset: 30,
emphasis: {
itemStyle: {
borderColor: '#f3f3f3',
borderWidth: 10
}
},
itemStyle: {
normal: {
borderColor: "#FFFFFF",
borderWidth: 1,
label: {
show: false,
},
labelLine: {
show: false
}
}
},
data: data,
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
// 调用
xuanranInt();
// 重新渲染echarts
function showHander(){
xuanranInt();
}
// 销毁实例
function desHander(){
var myChart = echarts.init(document.getElementById('main'));
// 销毁实例，销毁后实例无法再被使用。
// 在什么情况下需要调用该函数进行销毁当前的实例呢？
// 官方给的说明:在图表容器被销毁之后，调用 echartsInstance.dispose 销毁实例，
myChart.dispose();
}
// 清空当前实例
function qingkong(){
// 清空当前实例，会移除实例中所有的组件和图表。
var myChart = echarts.init(document.getElementById('main'));
myChart.clear()
}
</script>
</body>
</html>
clear和dispose的区别在哪里呢？
学过vue的同学都知道，v-show和v-if
其实clear类似于v-show
dispose类似于v-if
他们的区别就是这样
echarts的初始化和销毁dispose的更多相关文章
- Spring实现初始化和销毁bean之前进行的操作，三种方式
关于在spring 容器初始化 bean 和销毁前所做的操作定义方式有三种: 第一种:通过@PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作 第二 ...
- Spring源码学习之： 通过Spring @PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作
关于在spring 容器初始化 bean 和销毁前所做的操作定义方式有三种: 第一种:通过@PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作 第二 ...
- Spring bean 实现初始化、销毁方法的方式及顺序
Spring 允许 Bean 在初始化完成后以及销毁前执行特定的操作,常用方法有三种: 使用注解,在指定方法上加上@PostConstruct或@PreDestroy注解来制定该方法是在初始化之后还是 ...
- 通过Spring @PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进
关于在spring 容器初始化 bean 和销毁前所做的操作定义方式有三种: 第一种:通过@PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作 第二 ...
- 在spring容器中定义初始化和销毁bean前所做的操作，有三种方式
1.使用注解,通过@PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作 package com.luoq.test.annotation.init; ...
- 通过Spring @PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作
关于在spring 容器初始化 bean 和销毁前所做的操作定义方式有三种: 第一种:通过@PostConstruct 和 @PreDestroy 方法 实现初始化和销毁bean之前进行的操作 第二 ...
- spring实战三装配bean之Bean的作用域以及初始化和销毁Bean
1.Bean的作用域 所有的spring bean默认都是单例.当容器分配一个Bean时,不论是通过装配还是调用容器的getBean()方法,它总是返回Bean的同一个实例.有时候需要每次请求时都获得 ...
- 三种不同实现初始化和销毁bean之前进行的操作的比较
Spring容器中的bean是有生命周期的,Spring 允许在 Bean 在初始化完成后以及 Bean 销毁前执行特定的操作,常用的设定方式有以下三种: 通过实现 InitializingBean/ ...
- Spring3实战第二章第一小节 Spring bean的初始化和销毁三种方式及优先级
Spring bean的初始化和销毁有三种方式 通过实现 InitializingBean/DisposableBean 接口来定制初始化之后/销毁之前的操作方法: 优先级第二通过 <bean& ...
- FFmpeg源代码简单分析：常见结构体的初始化和销毁（AVFormatContext，AVFrame等）
===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...
随机推荐
- 超大超详细图解，让你掌握Spark memeoryStore内存管理的精髓
摘要:memoryStore主要是将没有序列化的java对象数组或者序列化的byteBuffer放到内存中. 本文分享自华为云社区<spark到底是怎么确认内存够不够用的?超大超详细图解!让你掌 ...
- IOS证书制作教程
转载:IOS证书制作教程 点击苹果证书 按钮 编辑 点击新增 编辑 输入证书密码,名称 这个密码不是账号密码,而是一个保护证书的密码,是p12文件的密码,此密码设置后没有其他地方可以找到, ...
- Solon Aop 特色开发（5）切面与环绕拦截
Solon,更小.更快.更自由!本系列专门介绍Solon Aop方面的特色: <Solon Aop 特色开发(1)注入或手动获取配置> <Solon Aop 特色开发(2)注入或手动 ...
- AI 0基础学习，数学名词解析
AI学习过程中,常见的名词解析 中位数 将数据从小到大排序,奇数列,取中间值,偶数列,中间两个值的平均,可做为销售指标 众数 一组数据中,数值出现最多的那个.反映哪款产品,销量最好 平均数 比赛中,去 ...
- 100天搞定机器学习|Day59 主成分分析(PCA)原理及使用详解
数学概念 方差:用来衡量随机变量与其数学期望(均值)之间的偏离程度.统计中的方差(样本方差)是各个数据分别与其平均数之差的平方的和的平均数. $$Var(X)=\frac{1}{n}\sum(x_i- ...
- mybatis使用oracle进行添加数据的心得
本次博主主要进行oralce数据库开发,好久不用oracle,有很多知识点也忘的差不多了,本次主要是复习一下工作中主要使用的一些sql语句编写: 查询 查询语句都是正常的,但是需要注意的是oracle ...
- SpringCloud学习 系列十、服务熔断与降级（3-类级别的服务降级）
系列导航 SpringCloud学习 系列一. 前言-为什么要学习微服务 SpringCloud学习 系列二. 简介 SpringCloud学习 系列三. 创建一个没有使用springCloud的服务 ...
- 简易机器学习笔记（八）关于经典的图像分类问题-常见经典神经网络LeNet
前言 图像分类是根据图像的语义信息对不同类别图像进行区分,是计算机视觉的核心,是物体检测.图像分割.物体跟踪.行为分析.人脸识别等其他高层次视觉任务的基础.图像分类在许多领域都有着广泛的应用,如:安防 ...
- ASP.Net Core 5.0 MVC log4net日志的添加
1. 引入程序集 Microsoft.Extensions.Logging.Log4Net.AspNetCore 及 log4net 2. 添加配置文件log4net.Config, 并将属性改为& ...
- 机器学习-无监督机器学习-SVD奇异值分解-24
[POC] 1. 奇异值分解的本质 特征值分解只能够对于方阵提取重要特征, Ax=λx λ为特征值 x为对应的特征向量 奇异值分解可以对于任意矩阵: 注意看中间的矩阵是一个对角矩阵,颜色越深越起作用- ...