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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_35713752/article/details/93493220

开发交流QQ群:  173683895   173683895   526474645  人满的请加其它群

效果图

实现源码:

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

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

展开阅读全文

没有更多推荐了,返回首页