Echars基本使用-动态渲染数据

 人狠话不多,想看代码您直说

<!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>

效果图