echart环图中间加图片

最新推荐文章于 2025-03-22 16:41:35 发布

high-kick

最新推荐文章于 2025-03-22 16:41:35 发布

阅读量992

点赞数

文章标签： echart环图中间加图片

本文链接：https://blog.csdn.net/shixueyan_fendou/article/details/103436043

版权

本文详细介绍使用ECharts创建饼图的过程，包括颜色定义、图例设置、数据配置等关键步骤，展示如何通过精细控制实现美观且信息丰富的图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	initToolBox:function(domId){
				var level1='#66d0e3'
				var level2='#46d481'
				var level3='#b4b2ef'
				var level4='#f7bf65'
				var level5='#fdef0b'
				let that=this
				var legend=[]
				/* this.levelRows.forEach(item=>{
					legend.push(item.name)
				}) */
		        let PIE1 = echarts.init(document.getElementById(domId));
		        var option = {
	        		graphic: {
	        		     elements: [{
	        		            type: 'image',
	        		            style: {
	        		                image: '<%=path%>/oap/images/sysHomePageNew/pie-center.png',
	        		                width: 90,
	        		                height: 90
	        		            },
	        		            left:'49%',
	        		            top:'74'
	        		      }]
	        		},
		            backgroundColor: '#f4ffe1', 
		            tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
		            legend: {  
		            	orient: 'vertical',
		            	x: 'left',
		            	left:'20',
	                    top:'7%',
	                    itemGap:30,
	                    itemWidth:14,
		                data:['应用','数据库','中间件','操作系统','网络'], 
		                textStyle: {
		                	color: '#36699d'
		                }
		            },
		            series: [               
		                {
			                name:'面积模式',
			                type:'pie',
			                radius : [50, 70],
			                center : ['60%', '50%'],
			                roseType : 'area',
			                color: [level1,level2,level3,level4,level5],
			                data:[{value:33, name:'应用'},
			                    {value:31, name:'数据库'},
			                    {value:23, name:'中间件'},
			                    {value:13, name:'操作系统'},
			                    {value:18, name:'网络'}]
			            }
		            ]
		        };
		        PIE1.setOption(option);
	    	}

最终图片
在这里插入图片描述