概念篇

下面，我们就常见的几种使用场景，介绍如何初始化一个图表以及改变其大小。

图表容器及大小

通常来说，需要在 HTML 中先定义一个 <div> 节点，并且通过 CSS 使得该节点具有宽度和高度。初始化的时候，传入该节点，图表的大小默认即为该节点的大小，除非声明了 opts.width 或 opts.height 将其覆盖。

<div id="huangzihan" style="width: 600px;height:400px;"></div><script type="text/javascript">var HZHChart = echarts.init(document.getElementById('huangzihan'));</script>

需要注意的是，使用这种方法在调用 echarts.init 时需保证容器已经有宽度和高度了。

初始化

在 HTML 中定义有宽度和高度的父容器（推荐）

指定图表的大小

如果图表容器不存在宽度和高度，或者，你希望图表宽度和高度不等于容器大小，也可以在初始化的时候指定大小。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>黄子涵学习Echarts</title><script src="echarts.js"></script>
</head><body><div id="huangzihan"></div><script type="text/javascript">var HZHChart = echarts.init(document.getElementById('huangzihan'), null, {width: 600,height: 400});</script>
</body></html>

响应容器大小的变化

监听图表容器的大小并改变图表大小

在有些场景下，我们希望当容器大小改变时，图表的大小也相应地改变。

比如，图表容器是一个高度为 400px、宽度为页面 100% 的节点，你希望在浏览器宽度改变的时候，始终保持图表宽度是页面的 100%。

这种情况下，可以监听页面的 window.onresize 事件获取浏览器大小改变的事件，然后调用 echartsInstance.resize 改变图表的大小。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>黄子涵学习Echarts</title><script src="echarts.js"></script><style>#huangzihan,html,body {width: 100%;}#huangzihan {height: 400px;}</style>
</head><body><div id="huangzihan"></div><script type="text/javascript">var HZHChart = echarts.init(document.getElementById('huangzihan'));window.onresize = function () {HZHChart.resize();};</script>
</body></html>

为图表设置特定的大小

除了直接调用 resize() 不含参数的形式之外，还可以指定宽度和高度，实现图表大小不等于容器大小的效果。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>黄子涵学习Echarts</title><script src="echarts.js"></script>
</head><body><div id="huangzihan"></div><script type="text/javascript">var HZHChart = echarts.init(document.getElementById('huangzihan'));window.onresize = function () {HZHChart.resize({width: 800,height: 400});};</script>
</body></html>

小贴士

阅读 API 文档的时候要留意接口的定义方式，这一接口有时会被误认为是 myCharts.resize(800, 400) 的形式，但其实不存在这样的调用方式。

容器节点被销毁以及被重建时

假设页面中存在多个标签页，每个标签页都包含一些图表。当选中一个标签页的时候，其他标签页的内容在 DOM 中被移除了。这样，当用户再选中这些标签页的时候，就会发现图表“不见”了。

本质上，这是由于图表的容器节点被移除导致的。即使之后该节点被重新添加，图表所在的节点也已经不存在了。

正确的做法是，在图表容器被销毁之后，调用 echartsInstance.dispose 销毁实例，在图表容器重新被添加后再次调用 echarts.init 初始化。

小贴士

在容器节点被销毁时，总是应调用 echartsInstance.dispose 以销毁实例释放资源，避免内存泄漏。

【HZHE002】黄子涵学习Echarts相关推荐

【HZHE004】黄子涵学习Echarts
概念篇数据集数据集(dataset)是专门用来管理数据的组件.虽然每个系列都可以在 series.data 中设置数据,但是从 ECharts4 支持数据集开始,更推荐使用数据集来管理数据 ...
【HZHE003】黄子涵学习Echarts
概念篇 ECharts 中的样式简介本文主要是大略概述,用哪些方法,可以在 Apache EChartsTM 中设置样式,改变图形元素或者文字的颜色.明暗.大小等. 本文介绍这几种方式,他们的功能范 ...
【HZHE001】黄子涵学习Echarts
快速上手获取 Apache ECharts 在 https://www.jsdelivr.com/package/npm/echarts 选择 dist/echarts.js,点击并保存为 echa ...
【HZHT001】黄子涵学习Typescript
黄子涵学习Typescript Typescript语言概览 Typescript语言基础变量在计算机程序中,一个变量使用给定的符号名与内存中的某个存储地址相关联并且可以容纳某个值.变量的值可以在 ...
【HZH001】黄子涵的第一次前端面试
公司概况爱企查爱企查职友集职友集看准网看准网面试题目如何实现中间空白,左右布局? 三栏布局浮动方式实现三栏布局源码 <!DOCTYPE html> <html l ...
三、MySQL子查询学习笔记（标量子查询、列子查询、行子查询、表子查询详解）
三.MySQL子查询学习笔记 7:子查询含义: 一条查询语句中又嵌套了另一条完整的select语句,其中被嵌套的select语句,称为子查询或内查询:在外面的查询语句,称为主查询或外查询分类: 一 ...
OK资本周子涵：区块链的成果是“熬”出来的
转自公众号:OK区块链区块链相关概念: PoW是工作量证明,PoS是权益证明,DPoS是委托权权益证明,但PoC是一种怎么样的共识机制? 目前来看,PoC并没有一个统一的说法,有的区块链项目认为Po ...
综艺小王子黄子稻，是否从实力派转为偶像？
身为舞蹈出道的黄子稻转型为多面发展,从实力方面来说,黄子稻确实能胜任多方面的才艺, 那他在娱乐圈的影响力到底有多大呢? 黄子韬,1993年5月2日出生于山东省青岛市,中国流行乐男歌手.演员.2012年 ...
【ZHYP004】子涵优品开发日志
footer部分 footer这里出现了一点问题,也给自己一个提醒,在遇到一些复杂的布局时,先别着急着写结构,先分析一下它的布局是什么样的,还需要画一下它的结构图,通过结构图来写HTML结构,同一层级 ...

【HZHE002】黄子涵学习Echarts

概念篇