echarts-圆环图

转载

mb5fca0cc9ee684 2016-06-06 14:05:00

文章标签 html ico 随机数 javascript jquery 文章分类 代码人生

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>