对后台传的map集合js进行封装,并且放在统计图里面

本文链接：https://blog.csdn.net/zhang1278851469/article/details/100565445

本文介绍如何将后台传递的Map集合在前端JS中进行封装，并将其数据用于生成统计图表，提供了相关的JS代码示例。

摘要由CSDN通过智能技术生成

对后台传的map集合js进行封装,并且放在统计图里面

js代码

<script type="text/javascript">
		$.ajax({
			url:'',
			type:'post',
			data:{},
			dataType:'json',
			success:function(data){
                var tempHtml = '';
                var lists=[];                
			for(var key in data){
				tempHtml += '<tr>';
				tempHtml += "<td>"+key+"</td>";
				tempHtml += "<td>"+data[key]+"</td>";
				tempHtml += '</tr>';
				if(key!='市场主体总量'){
					var maps={};
					var itemStyles={};
					var normals={};
					maps['value']=data[key];
					maps['name']=key;
					var colors='';
					if(key=='投资者'){
						colors='#F6BB33';
					}
					if(key=='经营者'){
						colors='#F1876F';
					}
					if(key=='受益者'){
						colors='#87CBF8';
					}
					if(key=='企业'){
						colors='#2A53AB';
					}
					if(key=='劳动者及消费者'){
						colors='#1AA087';
					}
					normals['color']=colors;
					itemStyles['normal']=normals;
					maps['itemStyle']=itemStyles;
					lists.push(maps);
				}
			}
			$("#tale").empty();
            $("#tale").html(tempHtml); //添加你拼接好的html到table里
            shichangzhuti(lists);
        }
			
	})

</script>

统计图

 <script type="text/javascript">
			function shichangzhuti(data){
				var dom = document.getElementById("shichangzhutiliang");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
					    tooltip : {
					        trigger: 'item',
					        show:false,
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					   legend: {
					        top: 12,
					        left: 'center',
					        data: ['投资者','经营者','劳动者及消费者','企业','受益者']
					    },
					    series : [
					        {
					            name: '',
					            type: 'pie',
					            radius : '55%',
					            center: ['50%', '60%'],
					            /* radius: ['40%', '60%'], */
					            data:data,
					            itemStyle:{ 
							        normal:{ 
							           label:{ 
							              show: true, 
							              formatter: '{b} : {c} ({d}%)' 
							           }, 
							              labelLine :{show:true} 
							         } 
							    } 
					        }
					    ]
					};
				if (option && typeof option === "object") {
				    myChart.setOption(option, true);
				}
			}
</script>