echars重要图表类型（二）简写易懂

最新推荐文章于 2023-07-31 16:41:50 发布

清晨Q

最新推荐文章于 2023-07-31 16:41:50 发布

阅读量194

点赞数 2

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_51026773/article/details/120976224

版权

饼图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>饼图</title>
		<style>
		.box{
			width: 600px;
			height: 600px;
			margin: auto;
			background-color: aqua;
		}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script src="echarts.min.js"></script>
		<script>
		var mychart=echarts.init(document.querySelector(".box"));
	   var pieData=[
			
			{
				name : "羊毛",
				value:1256245
		     },
			 
			 {
			 	name :"鸡毛",
			 	value:1232245
			  },
			  
			  {
			  	name : "狗毛",
			  	value:1241245
			   },
			   
			   {
			   	name : "猪毛",
			   	value:1451245
			    },
			    
				{
				name : "鸡毛",
				value:12444145
		     },
			 
			 {
			 	name : "虎毛",
			 	value:1251245
			  },
			  
			  {
			  	name : "人毛",
			  	value:12245245
			   },
			   
			   {
			   	name : "压毛",
			   	value:1241244
			    },
			    
				{
					name : "吃毛",
					value:1654512
			 }
			 ]
		var	option={

			 series:[{
				 name:'666',
				 type:'pie',
				 data:pieData
				 }
			 ]
  };
	 mychart.setOption(option);
		</script>

	</body>
</html>

玫瑰图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>南丁格尔玫瑰图</title>
		<style>
			.box{
				width: 600px;
				height: 600px;
				margin: auto;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script src="echarts.min.js"></script>
		<script>
		var mychart=echarts.init(document.querySelector(".box"));
		var option={
		    series: [
		        {
		          type: 'pie',
		          radius: [50, 250],
		          roseType: 'area',
		          itemStyle: {
		            borderRadius: 8
		          },
		          data: [
		            { value: 40, name: 'rose 1' },
		            { value: 38, name: 'rose 2' },
		            { value: 32, name: 'rose 3' },
		            { value: 30, name: 'rose 4' },
		            { value: 28, name: 'rose 5' },
		            { value: 26, name: 'rose 6' },
		            { value: 22, name: 'rose 7' },
		            { value: 18, name: 'rose 8' }
		          ]
		        }
		      ]
		    };
		mychart.setOption(option);
		</script>
	</body>
</html>

在这里插入图片描述

清晨Q

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
echars重要图表类型（二）简写易懂

饼图<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>饼图</title> <style> .box{ width: 600px; height: 600px; margin: auto; background-color: aqua; } </style> </head> &
复制链接

扫一扫