前面寫到一個(gè)關(guān)于Echarts餅狀圖交互數(shù)據(jù)的例子鸥拧，但是當(dāng)時(shí)name是寫死的，現(xiàn)在的value和name都是需要從后端獲取妓灌，然后渲染在界面何陆，大致的json數(shù)據(jù)是這樣的：
模擬一個(gè)json格式的數(shù)據(jù)：
{"list":[{"value":"管理","name":40},
{"value":"煉鋼工","name":30},
{"value":"焊工","name":36},
{"value":"操作工","name":31}]}
開始寫ajax+json數(shù)據(jù)模擬一個(gè)demo，僅供參考抵碟，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>餅狀圖數(shù)據(jù)交互</title>
<!-- 引入 echarts.js -->
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 為ECharts準(zhǔn)備一個(gè)具備大刑已（寬高）的Dom -->
<div id="main" style="width: 400px;height:300px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom熙兔，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
function hrFun(param) {
myChart.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>腋腮: {c} (68cgaui%)"
},
legend: {
/* orient: 'vertical',
x: 'right',
y: 'bottom',
textStyle: { //圖例文字的樣式
color: '#0b2b5e',
fontSize: 12
},*/
},
series: [{
name: '訪問來源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
data: [
]
}]
});
myChart.showLoading(); //數(shù)據(jù)加載完之前先顯示一段簡(jiǎn)單的loading動(dòng)畫
var names = []; //類別數(shù)組（用于存放餅圖的類別）
var brower = [];
$.ajax({
type: 'get',
url: 'data.json', //請(qǐng)求數(shù)據(jù)的地址
dataType: "json", //返回?cái)?shù)據(jù)形式為json
success: function(result) {
//請(qǐng)求成功時(shí)執(zhí)行該函數(shù)內(nèi)容尤蒿，result即為服務(wù)器返回的json對(duì)象
$.each(result.list, function(index, item) {
names.push(item.value); //挨個(gè)取出類別并填入類別數(shù)組
brower.push({
name: item.value,
value: item.name
});
});
myChart.hideLoading(); //隱藏加載動(dòng)畫
myChart.setOption({ //加載數(shù)據(jù)圖表
legend: {
data: names
},
series: [{
data: brower
}]
});
},
error: function(errorMsg) {
//請(qǐng)求失敗時(shí)執(zhí)行該函數(shù)
alert("圖表請(qǐng)求數(shù)據(jù)失敗!");
myChart.hideLoading();
}
});
}
hrFun();
</script>
</body>
</html>
原文作者：祈澈姑娘 技術(shù)博客：http://www.reibang.com/u/05f416aefbe1
90后前端妹子盯另，愛編程砰蠢，愛運(yùn)營亏栈，文藝與代碼齊飛岳颇，魅力與智慧共存的程序媛一枚氧骤。
歡迎關(guān)注【編程微刊】公眾號(hào)颅崩，回復(fù)【領(lǐng)取資源】,500G編程學(xué)習(xí)資源干貨免費(fèi)送几于。
