echarts-圆环图

1、问题背景

     利用echarts制作一个圆环图,图的容器动态生成,图的数据源利用随机数动态变化,模拟后台获取数据


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts-圆环图</title>
		<link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">
		<script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
		<script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
		<style>
			body,html{
				width: 99%;
				height: 99%;
				font-family: "微软雅黑";
				font-size: 12px;
			}
			#pie{
				width: 100%;
				height: 80%;
			}
		</style>
		<script>
			$(document).ready(function(){
				randomData();
			});
			
			//产生随机数
			function randomData()
			{
				var first = (Math.random()*1000+1000).toFixed(2);
				var second = (Math.random()*1000+1000).toFixed(2);
				var third = (Math.random()*1000+1000).toFixed(2);
				var fourth = (Math.random()*1000+1000).toFixed(2);
				var chartId = Math.floor(Math.random()*1000+10000);
				var pieName = ['第一季度','第二季度','第三季度','第四季度'];
				var pieValue = new Array();
				pieValue.push(first);
				pieValue.push(second);
				pieValue.push(third);
				pieValue.push(fourth);
				$("#bodyDiv").empty().append("<div id='pie"+chartId+"' style='width:100%;height:100%;'></div>");
				
				buildChart(pieName,pieValue,chartId);
			}
			
			//生成圆环图
			function buildChart(pieName,pieValue,chartId)
			{
				var pieData = new Array();
				for(var i=0;i<pieName.length;i++)
			    {
			    	pieData.push(eval('(' + ("{'value':"+pieValue[i]+",'name':'"+pieName[i]+"'}") + ')'));
			    }
				var pieChart = document.getElementById("pie"+chartId);
				var echart = echarts.init(pieChart);
				var option =  {
				    title : {
				        text: '一年四季收入比例',
				        x:"center"
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient: 'horizontal',
				        x:"center",
				        y:"bottom",
				        data: pieName
				    },
				    series : [
				        {
				            name: '季度',
				            type: 'pie',
				            radius : ['50%','70%'],
				            center: ['50%', '50%'],
				            data:pieData,
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				};
				
				echart.setOption(option);
			}
			
			//window.setInterval(randomData(),1000);
		</script>
	</head>
	<body id="bodyDiv">
		
	</body>
</html>

3、实现结果

echarts-圆环图_第1张图片

你可能感兴趣的:(jquery,ECharts)