<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>饼图json数据获取</title>
</head>
<body>
<div id="main2" style="width:300px;height:200px;"></div>
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript" src="js/echarts.simple.min.js" ></script>
<script>
function pie(id,legend,data,color){
var myChart2=echarts.init(document.getElementById(id));
var option = {
title : {
text: '数据来源',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: legend
},
series : [
{
name: '数据来源',
type: 'pie',
//radius : '55%',
radius : ['50%','70%'], //环形图
center: ['50%', '60%'],//位置
data:data,
itemStyle: {
normal:{
label:{
show:true,
formatter: '{b} : {c} \n ({d}%)'
},
labelLine:{
show:true
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
color: color
};
myChart2.setOption(option);// 为echarts对象加载数据*/
}
//接口获取数据
var legend=[];
var arr=[];
$.ajax({
type:"get",
url:"js/pie.json",
async:true,
success:function(data){
var mes=data.result.data;
for(var i in mes){
value=mes[i].value;
name=mes[i].name;
legend.push(mes[i].name);
arr.push({value,name});
}
console.log(arr);
pie("main2",legend,arr,['#1E90FF','brown','seagreen','rosybrown','chocolate']);
}
});
</script>
</html>
{
"result":{
"data":[
{
"value":"4",
"name":"文书"
},
{
"value":"7",
"name":"论坛"
},
{
"value":"3",
"name":"漏洞"
},
{
"value":"2",
"name":"微博"
},
{
"value":"6",
"name":"知乎"
}
]
}
}
