1. 在Html中定义有宽度和高度的父容器(推荐)
1.1. 通常来说, 需要在Html中先定义一个<div>节点, 并且通过CSS使得该节点具有宽度和高度。初始化的时候, 传入该节点, 图表的大小默认即为该节点的大小, 除非声明了opts.width或opts.height将其覆盖。
<div id="main" style="width: 600px; height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
</script>1.2. 需要注意的是, 使用这种方法在调用echarts.init时需保证容器已经有宽度和高度了。
2. 指定图表的大小
2.1. 如果图表容器不存在宽度和高度, 或者你希望图表宽度和高度不等于容器大小, 也可以在初始化的时候指定大小。
2.2. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>指定图表的大小</title>
<!-- 引入echarts.js -->
<script type="text/javascript" src="echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
<div id="main"></div>
<script type="text/javascript">
// 基于准备好的dom, 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'), null, { width: 600, height: 400 });
// 指定图表的配置项和数据
var option = {
// 为图表配置标题
title: {
text: '指定图表的大小'
},
// 配置提示信息
tooltip: {},
// 图例组件
legend: {
data: ['销量']
},
// 配置要在X轴显示的项
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
// 配置要在Y轴显示的项
yAxis: {},
// 系列列表
series: [
{
name: '销量', // 系列名称
type: 'bar', // 系列图表类型
data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>2.3.?效果图
3. 响应容器大小的变化
3.1. 在有些场景下, 我们希望当容器大小改变时, 图表的大小也相应地改变。
3.2. 比如, 图表容器是一个高度为400px、宽度为页面100%的节点, 你希望在浏览器宽度改变的时候, 始终保持图表宽度是页面的100%。
3.3. 这种情况下, 可以监听页面的window.onresize事件获取浏览器大小改变的事件, 然后调用echartsInstance.resize改变图表的大小。
3.4. 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>响应容器大小的变化</title>
<!-- 引入echarts.js -->
<script type="text/javascript" src="echarts.js"></script>
<style type="text/css">
html, body, #main {
width: 100%;
}
#main {
height: 400px;
}
</style>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的DOM -->
<div id="main"></div>
<script type="text/javascript">
// 基于准备好的dom, 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
// 为图表配置标题
title: {
text: '响应容器大小的变化'
},
// 配置提示信息
tooltip: {},
// 图例组件
legend: {
data: ['销量']
},
// 配置要在X轴显示的项
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
// 配置要在Y轴显示的项
yAxis: {},
// 系列列表
series: [
{
name: '销量', // 系列名称
type: 'bar', // 系列图表类型
data: [5, 20, 36, 10, 10, 20] // 系列中的数据内容
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.onresize = function() {
myChart.resize();
};
</script>
</body>
</html>3.5. 效果图
3.6. 除了直接调用resize()不含参数的形式之外, 还可以指定宽度和高度, 实现图表大小不等于容器大小的效果。
myChart.resize({
width: 800,
height: 400
});