南丁格尔图

梦兮呀

已于 2024-01-02 20:44:08 修改

阅读量364

点赞数 8

文章标签： echarts

于 2024-01-02 20:11:18 首次发布

本文链接：https://blog.csdn.net/isluya/article/details/135348956

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>饼图</title>
		<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		
		<div id="main" style="width: 600px; height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			
			var option = {
				legend:{
					data:['饮食','衣服'],
					//水平方向
					x:'left',
					//垂直方向
					orient:'vertical',
				},
				series:[
					{
						type:'pie',
						label:{
							formatter:'{b}占{d}%',
							position:'inside',//标签在饼图内显示
						},
						selectedMode:'single',//使扇形区域偏离饼图
						selectedOffset:30,//扇形区域偏离的距离
						radius:[50,100],//环形图，内半径50，外半径100
						roseType:'radius',//南丁格尔图
						data:[]
					}
				]
			};
			
			$.ajax({
				url:'data/pie.json',
				dataType:'json',
				success:function(result){
					console.log(result);
					//排序
					let arr = result.data.sort(function(a,b){
						return b.value - a.value;
					});
					
					option.series[0].data = arr;
					
					//item是每一项数据，这段是获取name类数据的所有数据
					let nameArr = arr.map(function(item){
						return item.name;
					});
					
					//将每项类型放到legend中
					option.legend.data = nameArr;
					console.log(nameArr);
					
					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				}
			});
			
			
			
		</script>
		
		
	</body>
</html>

pie.json内容

{
	"data": [
		{"name": "饮食", "value": 12333},
		{"name": "衣服", "value": 3008},
		{"name": "书籍", "value": 893},
		{"name": "数码设备", "value": 6090},
		{"name": "交通出行", "value": 5388},
		{"name": "化妆品", "value": 1800}
	]
}