ajax動態(tài)賦值echarts餅圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.html {
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
width: 100%;
height: 100%;
}
#main1 {
width: 600px;
height: 500px;
float: left;
}
#main2 {
width: 50%;
height: 50%;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div id="main1"></div>
<div id="main2"></div>
</div>
<script src="./echarts.min.js"></script>
<script src="./jquery-3.3.1.js"></script>
<script>
var main1 = echarts.init(document.getElementById('main1'));
var names = [];
var mydate = [];
$.ajax({
method: 'get',
url: './list.json',
dataType: 'json',
success: function (result) {
for (var i = 0; i < result.date.length; i++) {
// console.log(result.date.length)
// console.log(result.date[i].name)
names.push(result.date[i].name);
console.log(names)
mydate[i] = { value: result.date[i].num, name: result.date[i].name };
console.log(mydate)
}
main1.setOption({
title: {
text: '城市人數(shù)分布圖',
left: 'left'
},
tooltip: {
trigger: 'item',
formatter: " : {c} (u0z1t8os%)"
},
legend: {
icon: "rect",//形狀 類型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 10, // 設(shè)置寬度
itemHeight: 10, // 設(shè)置高度
itemGap: 10, // 設(shè)置間距
align: "left",
show: true,
left: 'right', //位置
data: names,
textStyle: {
//文字樣式
color: "#9b9fae",
fontSize: "12"
}
},
series: [
{
name: '所占比例',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data:mydate,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
}
}
]
});
}
});
</script>
</body>
</html>
其中的關(guān)鍵代碼是：
mydate[i] = { value: result.date[i].num, name: result.date[i].name };
定義一個(gè)數(shù)組為names，在 legend中通過 data: names傳入圖例名稱；
創(chuàng)建一個(gè)數(shù)組mydata[]，用for循環(huán)把后臺傳來的List整個(gè)放進(jìn)去(注意格式為“{value:xxx, name:xxx}”），在option里的series中通過“data: mydata”傳入即可；
ajax動態(tài)賦值echarts餅圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.html {
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
width: 100%;
height: 100%;
}
#main1 {
width: 600px;
height: 500px;
float: left;
}
#main2 {
width: 600px;
height: 500px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div id="main1"></div>
<div id="main2"></div>
</div>
<script src="./echarts.min.js"></script>
<script src="./jquery-3.3.1.js"></script>
<script>
var main2 = echarts.init(document.getElementById('main2'));
var names = [];
var nums = [];
$.ajax({
method:'get',
url:'./list.json',
dataType:'json',
success:function(res){
for (var i = 0; i < res.date.length; i++) {
names.push(res.date[i].name);
nums.push(res.date[i].num);
}
console.log(names)
console.log(nums)
main2.setOption({
title: {
text: '案件處理分析圖',
left: 'left'
},
legend: {
icon: "rect",//形狀 類型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
itemWidth: 10, // 設(shè)置寬度
itemHeight: 10, // 設(shè)置高度
itemGap: 10, // 設(shè)置間距
align: "left",
show: true,
left: 'right', //位置
textStyle: {
//文字樣式
color: "#9b9fae",
fontSize: "12"
}
},
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: names,
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '人數(shù)統(tǒng)計(jì)',
type: 'bar',
barWidth: '30%',
data: nums
}
]
});
}
})
</script>
</body>
</html>