人狠话不多,想看代码您直说
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
<script type="text/javascript">
var toc = [{
mince: "优秀",
listings: "10",
delistings: "20%"
}, {
mince: "良好",
listings: "28",
delistings: "50%"
}, {
mince: "及格",
listings: "12",
delistings: "33%"
}, {
mince: "不及格",
listings: "4",
delistings: "25%"
}]
var data = []
for (var i = 0; i < toc.length; i++) {
var data_ = {}
data_.value = []
data_.value[0] = toc[i].listings
data_.value[1] = toc[i].delistings
data_.name = toc[i].mince
data.push(data_)
}
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
tooltip: {
formatter: function(params) {
return '共有' + params.value[0] + '人' + params.name + ',男女占比为' + params.value[1]
}
},
legend: {
top: '5%',
left: 'center'
},
series: [{
name: 'Access From',
type: 'pie',
radius: ['20%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
formatter: '{c}',
}
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: data
}]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
效果图