006_饼图

自由与束缚JavaJavaScript

已于 2022-03-15 17:53:14 修改

阅读量444

点赞数

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

于 2022-03-15 09:23:54 首次发布

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

版权

Apache ECharts 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. 饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比, 每个的弧度表示数据数量的比例。它的数据格式比柱状图更简单, 只有一维的数值, 不需要给类目。因为不在直角坐标系上, 所以也不需要xAxis和yAxis。

2. 最简单的饼图

2.1. 代码

<!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" style="width: 600px; height:400px; border: 1px solid;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '最简单的饼图'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['访问来源']
		        },
		        // 系列列表
		        series: [
		          {
		            name: '访问来源', // 系列名称
		            type: 'pie', // 系列图表类型
		            radius: '55%',  // 饼图的半径, 直径为可视区尺寸(容器高宽中较小一项)的55%长度。
		            data: [ // 系列中的数据内容
		            	{ value: 235, name: '视频广告' },
                        { value: 274, name: '联盟广告' },
                        { value: 310, name: '邮件营销' },
                        { value: 335, name: '直接访问' },
                        { value: 400, name: '搜索引擎' }
		            ]
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

2.2. 效果图

3. 南丁格尔图(玫瑰图)

3.1. 南丁格尔图又称玫瑰图, 通常用弧度相同但半径不同的扇形表示各个类目。ECharts可以通过将饼图的series.roseType值设为'area'实现南丁格尔图, 其他配置项和饼图是相同的。

3.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" style="width: 600px; height:400px; border: 1px solid;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '南丁格尔图(玫瑰图)'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['访问来源']
		        },
		        // 系列列表
		        series: [
		          {
		            name: '访问来源', // 系列名称
		            type: 'pie', // 系列图表类型
		            radius: '55%',  // 饼图的半径, 直径为可视区尺寸(容器高宽中较小一项)的55%长度。
		            roseType: 'area', // 把饼图显示成南丁格尔图
		            data: [ // 系列中的数据内容
		            	{ value: 235, name: '视频广告' },
                        { value: 274, name: '联盟广告' },
                        { value: 310, name: '邮件营销' },
                        { value: 335, name: '直接访问' },
                        { value: 400, name: '搜索引擎' }
		            ]
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

3.3. 效果图

4. 圆环图

4.1. 圆环图同样可以用来表示数据占总体的比例, 相比于饼图, 它中间空余的部分可以用来显示一些额外的文字等信息, 因而也是一种常用的图表类型。

4.2. 在ECharts中, 饼图的半径除了上一小节提到的, 可以是一个数值或者字符串之外, 还可以是一个包含两个元素的数组, 每个元素可以为数值或字符串。当它是一个数组时, 它的前一项表示内半径, 后一项表示外半径, 这样就形成了一个圆环图。

4.3. 代码

<!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" style="width: 600px; height:400px; border: 1px solid;"></div>
		<script type="text/javascript">
	    	// 基于准备好的dom, 初始化echarts实例
	      	var myChart = echarts.init(document.getElementById('main'));

	      	// 指定图表的配置项和数据
	      	var option = {
	      		// 为图表配置标题
		        title: {
		          text: '圆环图'
		        },
		        // 配置提示信息
		        tooltip: {},
		        // 图例组件
		        legend: {
		          data: ['访问来源']
		        },
		        // 系列列表
		        series: [
		          {
		            name: '访问来源', // 系列名称
		            type: 'pie', // 系列图表类型
		            radius: ['40%', '70%'],  
		            data: [ // 系列中的数据内容
		            	{ value: 235, name: '视频广告' },
                        { value: 274, name: '联盟广告' },
                        { value: 310, name: '邮件营销' },
                        { value: 335, name: '直接访问' },
                        { value: 400, name: '搜索引擎' }
		            ]
		          }
		        ]
	      	};

	      	// 使用刚指定的配置项和数据显示图表。
	      	myChart.setOption(option);
	    </script>
	</body>
</html>

4.4. 效果图

自由与束缚JavaJavaScript

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
006_饼图

1. 饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比, 它的数据格式比柱状图更简单, 只有一维的数值, 不需要给类目。因为不在直角坐标系上, 所以也不需要xAxis和yAxis。2. 例子2.1. 代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>ECharts饼图</title> <!-- 引入echarts.js
复制链接

扫一扫