function loadBlock5() {
const block5 = echarts.init(document.getElementById("block5"), "macarons");
let color = ['#f845f1', '#ad46f3', '#5045f6', '#4777f5', '#44aff0', '#45dbf7', '#f6d54a', '#f69846', '#ff4343', '#f845f1'];
$.ajax({
url: ajaxBaseUrl + "data/event-distributed.json",
dataType: "json"
}).done(function () {
$("#block5").addClass("chart-done");
}).done(function (data) {
var total = 0;
for (let i = 0; i < data.length; i++) {
total += data[i].value;
}
let block5Opt = {
tooltip: {
trigger: "item",
formatter: function (params) {
var percent = 0;
percent = ((params.value / total) * 100).toFixed(0);
const marker = '';
if (params.name !== '') {
return params.name + "
" + marker + "数量:" + params.value + "" + marker + "占比:" + percent + "%";
} else {
return '';
}
}
},
calculable: true,
series: [{
type: "pie",
radius: [8, 90],
avoidLabelOverlap: false,
startAngle: 0,
center: ["50%", "50%"],
roseType: "area",
selectedMode: "single",
label: {
normal: {
show: true,
formatter: "{b}"
},
emphasis: {
show: true
}
},
labelLine: {
normal: {
show: true,
smooth: false,
length: 5,
length2: 10
},
emphasis: {
"show": true
}
},
data: []
}]
};
block5.setOption(block5Opt);
var seriesData = [];
for (var i = 0; i < data.length; i++) {
seriesData.push({
value: data[i].value,
name: data[i].name,
itemStyle: {
normal: {
color: color[i]
}
}
});
}
block5.setOption({
series: [{
data: seriesData
}]
});
}).fail(function (jqXHR) {
console.log("Ajax Fail: ", jqXHR.status, jqXHR.statusText);
});
}