echarts饼图大小设置

六月初六月初 Echarts 2018-11-29 19:53:43

echarts饼图大小设置

相关代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.staticfile.org/echarts/4.2.0-rc.2/echarts.min.js"></script>
	</head>
	<body>
		<div id="test" style="height: 500px;width: 100%;">
			
		</div>
		<script>
			var BarBOX1 = echarts.init(document.getElementById("test"));
			option1 = {
			    series : [
			        {
			            name: '访问来源',
			            type: 'pie',
			            radius : '80%',//整个尺寸的80%
			            center: ['50%', '50%'],//  上下居中
			            data:[
			                {value:335, name:'直接访问'},
			                {value:310, name:'邮件营销'},
			                {value:234, name:'联盟广告'},
			                {value:135, name:'视频广告'},
			                {value:1548, name:'搜索引擎'}
			            ],
			        }
			    ]
			};

			BarBOX1.setOption(option1);
		</script>
	</body>
</html>

从例子中可以看出，尺寸的控制主要是以下两个来设置。

radius : '80%',
center: ['50%', '50%'],

结语：饼图是常用的一个图标，所以这些常见的设置还是要了解哦！

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！