1、问题背景
利用echarts制作一个圆环图，图的容器动态生成，图的数据源利用随机数动态变化，模拟后台获取数据
2、实现源码
[html] view plain copy print ? <!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、实现结果
