006_饼图_chat.js饼状图

作者：菜鸟追梦旅行 | 2024-02-23 01:01:03

踩

chat.js饼状图

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. 效果图

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/132537