echarts横向圆环图案例，需要的小伙伴拿走

最新推荐文章于 2024-03-22 15:18:12 发布

午夜玫瑰钻

最新推荐文章于 2024-03-22 15:18:12 发布

阅读量4k

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/gujinapenggu5/article/details/122836639

版权

echarts javascript

echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>index_004ajax圆形图</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echart4.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
		<div class="demo" id="main"></div>
		
		
		<script type="text/javascript">
			//圆形统计图
			var ehcartsArray = [
				{"name":"低","value":4,"percentage":"0.2"},
				{"name":"较低","value":6,"percentage":"0.3"},
				{"name":"高","value":5,"percentage":"0.25"},
				{"name":"较高","value":5,"percentage":"0.25"}
			];
			var echartsTotal = 20;
			var echartsTotalDesc = "描述";
			// 指定图表的配置项和数据
			// {a}:系列名字   {b}:数据名字   {c}:数据值  {d}:百分比
		    option = {
			    tooltip : {						
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
				title:{
					text:"",
					subtext:"",
					left:"25%",
					top:"38%",
					itemGap:-10,			// 调整上下距离
					textStyle:{
						fontSize:30,
						color:"#4776d2",
						fontFamily:"impact",
						align:"center"
					},
					subtextStyle:{
						fontFamily:"微软雅黑",
						fontSize:16,
						fontFamily:"impact",
						color:"#50607a"
					}
				},
			    legend: {
			        orient: 'vertical',		// 控制水平排列
			        icon:"roundRect",		// 修改小图标形状 circle 圆 roundRect 方形
					itemWidth:10,
					itemHeight:10,
					x:320,
					y:'middle',
					// textStyle:{
					// 	fontSize:15,
					// 	color:"#828282"
					// },
					textStyle:{
						rich:{
							oneone:{
								width:20,
								color:"#000000"
							},
							twotwo:{
								width:20,
								color:"#c43636",
								fontSize:13
							},
							threethree:{
								width:20,
								color:"#c43636",
								fontSize:13
							}
						}
					},
					formatter:function(name){
						var total = 0;
						var target;
						for(var i=0; i<ehcartsArray.length;i++){
							total += ehcartsArray[i].value;
							if(ehcartsArray[i].name==name){
								target = ehcartsArray[i].value
							}
						}
						var v = ((target/total)*100);
						return `{oneone|${name}}    数量 {twotwo|${target}} 占比 {threethree|${v}%}`
					},
			    },
				calculable: false,
				avoidLabelOver: false,
			    series : [
			        {
			            name: '数据来源',
			            type: 'pie',
			            radius : ['60%', '50%'],
			            center: ['30%', '50%'],
			            startAngle: 90,
						clockwise: false,
			            itemStyle: {
							normal:{
								label:{
									show:false
								},
								labelLine:{
									show:false
								}
							},
			                emphasis: {
								label:{
									show:false,
									position:"center",
									textStyle:{
										fontSize:"30",
										fontWeight:"bold"
									}
								}
			                }
			            },
						data:ehcartsArray
			        }
			    ]
			};
			option.color=["#2dcc96","#afbad0","#ff7170","#ffbd4c"];
			option.title.text=echartsTotal;
			option.title.subtext=echartsTotalDesc;
			var myChart = echarts.init(document.getElementById('main'));
		    // 使用刚指定的配置项和数据显示图表。
		    myChart.setOption(option);
		</script>
		
		
	</body>
</html>

午夜玫瑰钻

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echarts横向圆环图案例，需要的小伙伴拿走

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>index_004ajax圆形图</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> <script src="js/jquery-2.1.0.js" type="text/javascript.
复制链接

扫一扫

专栏目录