HTML实现饼状图完整源码及效果图（附源码）

最新推荐文章于 2023-11-14 11:14:37 发布

刺心疯

最新推荐文章于 2023-11-14 11:14:37 发布

阅读量4.3k

点赞数 3

分类专栏： HTML5

本文链接：https://blog.csdn.net/qq_42363090/article/details/94445616

版权

HTML5 专栏收录该内容

203 篇文章

订阅专栏

效果图

在这里插入图片描述
实现源码：

<!DOCTYPE html>
<html 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="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
		<script type="text/javascript">
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			
			app.title = '环形图';
 
			var option = {
				tooltip: {
					trigger: 'item',
					formatter: "{a} <br/>{b}: {c} ({d}%)"
				},
				color:['#93D8A9','#FFB99D','#AF7DCC','#FFD83D','#bbe2e8'],
				legend: {
					orient: 'horizontal',
					x: 'left',
					data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
				},
				series: [{
					name: '访问来源',
					type: 'pie',
					radius: ['30%', '70%'],
					avoidLabelOverlap: false,
					label: {
						normal: {
							show: false,
							position: 'center'
						},
						emphasis: {
							show: true,
							textStyle: {
								fontSize: '30',
								fontWeight: 'bold'
							}
						}
					},
					labelLine: {
						normal: {
							show: false
						}
					},
					data: [{
							value: 335,
							name: '直接访问'
						},
						{
							value: 310,
							name: '邮件营销'
						},
						{
							value: 234,
							name: '联盟广告'
						},
						{
							value: 135,
							name: '视频广告'
						},
						{
							value: 1548,
							name: '搜索引擎'
						}
					]
				}]
			};
			if(option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		</script>
	</body>
 
</html>

饼状图其它属性配置文档地址：点击跳转