s-常用百分比饼状图

最新推荐文章于 2023-04-23 10:47:05 发布

dongsdh

最新推荐文章于 2023-04-23 10:47:05 发布

阅读量155

点赞数

分类专栏：第三方-echarts 文章标签： echarts javascript vue.js

本文链接：https://blog.csdn.net/dongsdh/article/details/125106807

版权

第三方-echarts 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<style type="text/css">
		.box{
			width: 90px;
			height: 90px;
			border: 1px solid #ddd;
		}
	</style>
</head>
<body>
	

	<div class="box" id="box"></div>
	
	
	
	<script src="jquery.min.js"></script>
	<script src="echarts.js"></script>
	
	<script>
		tbarshow3()
		function tbarshow3(){
			var num1=42;
			var num2=100-num1;
			var box = echarts.init($("#box")[0]);
			option = {
			    color:['#C90C0A','#E7E7E7'],
			    title: {
			        text: num1+'%',
			        x: 'center',
			        y: 'center',
			        textStyle: {
			            fontSize: 18,
			            fontWeight: 'normal',
			            color: '#BBBBBB',
			        }
			    },
			    series: [{
			    	animation: false,
			        name: 'Line 1',
			        type: 'pie',
			        clockWise: true,
			        radius: ['70%', '90%'],
			        itemStyle: {
			            normal: {
			                label: {
			                    show: false
			                },
			                labelLine: {
			                    show: false
			                }
			            }
			        },
			        hoverAnimation: false, 
			        data: [
			            {
			                value:num1,
			                itemStyle:{
			                	normal:{color:'#C90C0A'},
			                	emphasis:{color:'#C90C0A'}
			                }
			            }, {
			                value: num2,
			                itemStyle:{
			                	normal:{color:'#E7E7E7'},
			                	emphasis:{color:'#E7E7E7'}
			                }
			            }
			        ],
			    }]
			};
			box.setOption(option, true);
		}
		
	</script>
</body>
</html>