echarts-圆环图

来源：互联网发布：进入大数据时代编辑：程序博客网时间：2024/05/22 13:40

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、实现结果

阅读全文

0 0