002_图表容器及大小

自由与束缚JavaJavaScript

已于 2022-03-15 15:27:17 修改

阅读量556

点赞数

分类专栏： Apache ECharts 文章标签： echarts 前端

于 2022-03-14 19:42:58 首次发布

本文链接：https://blog.csdn.net/aihiao/article/details/123486516

版权

Apache ECharts 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

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
});

自由与束缚JavaJavaScript

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
002_图表容器及大小

1. 在Html中定义有宽度和高度的父容器(推荐)1.1. 通常来说, 需要在Html中先定义一个<div>节点, 并且通过CSS使得该节点具有宽度和高度。初始化的时候, 传入该节点, 图表的大小默认即为该节点的大小, 除非声明了opts.width或opts.height将其覆盖。<div id="main" style="width: 600px; height:400px;"></div><script type="text/javascript"
复制链接

扫一扫