echart环图中间加图片

	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);
	    	}

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

发布了24 篇原创文章 · 获赞 0 · 访问量 1108

猜你喜欢

转载自blog.csdn.net/shixueyan_fendou/article/details/103436043