Echarts pie 饼图类型后显示数据

灰太狼 2023-10-18 09:43 141阅读 0赞

## Echarts pie 饼图类型后显示数据 ##

![在这里插入图片描述][70]  
![在这里插入图片描述][70 1]

sysPie:function(libtypelist){
        
    				var that=this;
    				libtypelist=that.indexData.libtypelist;
    				var name=[];
    				var list=[];
    				for(var i=0; i<libtypelist.length;i++){
        
    					name.push(libtypelist[i].LIB_TYPE);
    					list.push({
        value:libtypelist[i].num,name:libtypelist[i].LIB_TYPE});
    				}
    				var myChart = echarts.init(document.getElementById('sysPie'));
    				option = {
        
    						title : {
        
    							text: '实验室类型统计',
    							x:'center'
    						},
    						tooltip : {
        
    							trigger: 'item',
    							formatter: "{a} <br/>{b} : {c} ({d}%)"
    						},
    						legend: {
        
    							orient: 'vertical',
    							left: 'left',
    							data: name
    						},
    						series : [
    						          {
        
    						        	  name: '实验室类型统计',
    						        	  type: 'pie',
    						        	  radius : '55%',
    						        	  center: ['50%', '60%'],
    						        	  label: {
        
    						        		  normal: {
        
    						        			  show: true,
    						        			  formatter: '{b}: {c}({d}%)'
    						        		  }
    						        	  },
    						        	  data:list,
    						        	  itemStyle: {
        
    						        		  emphasis: {
        
    						        			  shadowBlur: 10,
    						        			  shadowOffsetX: 0,
    						        			  shadowColor: 'rgba(0, 0, 0, 0.5)'
    						        		  }
    						        	  }
    						          }
    						          ]
    				};
    				myChart.setOption(option);
    			},

[70]: https://img-blog.csdn.net/20181015110940123?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODk4MDMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20181015104754404?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2ODk4MDMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissoZG4ubmV0L3FxXzI2ODk4MDMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70