echarts饼图部分设置解析

最新推荐文章于 2024-07-05 08:30:00 发布

杨七七

最新推荐文章于 2024-07-05 08:30:00 发布

阅读量1.5k

点赞数 1

分类专栏：前端文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_42176565/article/details/109000046

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现如图所示饼图

<!DOCTYPE html>
<html style="height: 100%">
	<head>
		<meta charset="utf-8">
		<style>
			.container{
		   width:400px;
		   height:250px;
		   margin:0 auto;
		   }
	   </style>
	</head>
	<body>
		<div id="container" class="container" style=""></div>

		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
		<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
			< script type = "text/javascript"
			src = "https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js" >
		</script>
		<script type="text/javascript">
			var dom = document.getElementById("container");
			var myChart = echarts.init(dom);
			var app = {};
			option = null;
			var itemStyle = {
				normal: {
					opacity: 0.7,
					borderWidth: 3,
				}
			};
			option = {
				tooltip: {
					show: false, //关掉鼠标移上去时饼图扇区提示
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)'
				},

				legend: {
					selectedMode: false, // 取消右侧图例占击显示和隐藏指定项
					icon: "circle", //图例的形状为圆形
					orient: 'vertical',
					right: 1, //应该是与右侧有多少间隔
					y: 'center', //垂直居中
					data: ['汉族', '蒙古族', '回族', '满族', '壮族', '其他'], //图例参数
				},
				title: {
					text: '民族占比分析', //饼图名称
					x: 'center', //位置在x轴居中位置
					y: 'bottom', //位置在y轴底部位置
					textStyle: {
						fontSize: 16,
						fontStyle: 'normal',
						fontWeight: '500',
					},
				},
				series: [{
						name: '访问来源',
						type: 'pie',
						radius: ['40%', '65%'], //应该是环形设置
						avoidLabelOverlap: false,
						color: ['#ffd44c', '#e46300', '#6f83a2', '#ff6f30', '#ffa41a', '#b48900', 'ffa41a', '6f83a2', '923000'], //饼图的颜色
						hoverAnimation: false,
						center: ['50%', '50%'], //饼图整个图所在位置
						label: {
							show: true, //那个是否显示那些百分比的那个字的开关
							formatter: '{d}%',
							position: 'outer', //是显示在环上，还是在环外

							textStyle: {
								color: '#535251', //上两条备注的文字的样式
								fontSize: 12
							},
							emphasis: {
								fontSize: 12
							}, //鼠标移入字体大小

						},
						emphasis: {
							label: {
								show: true,
								fontSize: '30',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false,
							length: -5,
						},
						itemStyle: {
							show: true,
							borderColor: '#fff',
							borderWidth: 2, //设置每个扇区之间的间隔，没找到具体值 ，用的扇区边框属性
						},
						data: [{
								value: 560,
								name: '汉族'
							},
							{
								value: 370,
								name: '蒙古族'
							},
							{
								value: 140,
								name: '回族'
							},
							{
								value: 100,
								name: '满族'
							},
							{
								value: 120,
								name: '壮族'
							},
							{
								value: 90,
								name: '其他'
							}
						]
					}, //这个是第一个环图，要实现如图的两个数据环里环外都显不，需要再重新加一条相同的数据，就是下面这个｛｝里面的
					{
						color: ['#ffd44c', '#e46300', '#6f83a2', '#ff6f30', '#ffa41a', '#b48900', 'ffa41a', '6f83a2', '923000'],
						hoverAnimation: false,
						name: '访问来源',
						type: 'pie',
						radius: ['40%', '65%'],
						avoidLabelOverlap: false,
						center: ['50%', '50%'],
						label: {
							show: true,
							formatter: '{c}',
							position: 'inner',

							textStyle: { //图例文字的样式
								color: '#fff',
								fontSize: 12
							},
							emphasis: {
								fontSize: 12
							}, //鼠标移入字体大小

						},
						emphasis: {
							label: {
								show: true,
								fontSize: '30',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false,


						},
						itemStyle: {
							show: true,
							borderColor: '#fff',
							borderWidth: 2,
						},
						data: [{
								value: 560,
								name: '汉族'
							},
							{
								value: 370,
								name: '蒙古族'
							},
							{
								value: 140,
								name: '回族'
							},
							{
								value: 100,
								name: '满族'
							},
							{
								value: 120,
								name: '壮族'
							},
							{
								value: 90,
								name: '其他'
							}
						]
					}
				]
			};
			if (option && typeof option === "object") {
				myChart.setOption(option, true);
			}
		</script>
	</body>
</html>