pie中间显示总数图例显示数量

最新推荐文章于 2023-07-19 10:47:12 发布

随便叫个啥呢

最新推荐文章于 2023-07-19 10:47:12 发布

阅读量442

点赞数

分类专栏：工作之旅 web 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/wanglj7525/article/details/126030897

版权

工作之旅同时被 2 个专栏收录

32 篇文章 0 订阅

订阅专栏

web

2 篇文章 0 订阅

订阅专栏

该段代码使用Echarts库创建了一个饼图，展示了不同产业类型的数量分布，如高端化工、新一代信息技术、生物医药等。数据来源于JSON请求，其中包含各产业类型的名称和值。饼图具有详细的提示信息、标签样式和丰富的自定义配置。

摘要由CSDN通过智能技术生成

在这里插入图片描述

var myChart1 = echarts.init(document.getElementById('demo1'));
$.getJSON("cylx", function(data) {
	if(data.code == 0) {
		var option1 = {title: {
				zlevel: 0,
				text: ['{name|产业企业}', '{value|' + data.data.sum + '}'].join('\n'),
				top: '42%',
				left: '29%',
				textAlign: 'center',
				textStyle: {
					rich: {
						value: {
							color: '#303133',
							fontSize: fontSize(24),
							lineHeight: fontSize(24),
						},
						name: {
							color: '#909399',
							fontSize: fontSize(16),
							lineHeight: fontSize(35),
						},
					},
				},
			},
			color:["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4","#ea7ccc"],
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b}: {c} ({d}%)',
			},
			legend: {
				orient: 'vertical',
				right: fontSize(20),
				top: fontSize(60),
				bottom: fontSize(20),
				formatter: function(name) {
					var data = option1.series[0].data;
					// var total = 0;
					var tarValue;
					for (var i = 0; i < data.length; i++) {
						// total += data[i].value;
						if (data[i].name == name) {
							tarValue = data[i].value;
						}
					}
					var v = tarValue;
					// var p = Math.round(((tarValue / total) * 100));
					return "{a|"+name+"}{b||}{x|"+v+"}";
				},
				textStyle: {
					//rich放在textStyle里面
					rich: {
						a: {
							width: fontSize(150),
						},
						b: {
							// borderLeftStyle:'solid',
							// borderLeftWidth:1,
							// borderColor: '#449933',
							color:'#e5e5e5',
							width: fontSize(40)
						},
						x: {
							fontSize: fontSize(18),
							fontFamily: 'Microsoft YaHei',
							borderColor: '#449933',
							borderRadius: 4
						},
					}
				}
			},
			series: [
				{
					name:'产业类型',
					type: 'pie',
					center:['30%','50%'],
					radius: ['50%', '60%'],
					avoidLabelOverlap: false,
					stillShowZeroSum: false,
					zlevel: 1,
					label: {
						normal: {
							padding: [20, 20, 20, 20],
							backgroundColor: '#fff',
							show: false,
							position: 'center',
							formatter: ['{name|{b}}', '{value|{c}}'].join('\n'),
							rich: {
								value: {
									color: '#303133',
									fontSize: fontSize(24),
									lineHeight: fontSize(24),
								},
								name: {
									color: '#909399',
									fontSize: fontSize(14),
									lineHeight: fontSize(35),
								},
							},
						},
						emphasis: {
							show: true,
							textStyle: {
								fontSize: fontSize(16),
								fontWeight: 'bold',
							},
						},
					},
					labelLine: {
						normal: {
							show: false,
						},
					},
					itemStyle: {
						normal: {
							borderWidth: fontSize(4),
							borderColor: '#ffffff',
						},
						emphasis: {
							borderWidth: 0,
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)',
						},
					},
					data: data.lists
				}
			]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart1.setOption(option1);
		layer.close(loading);
	} else {
		layer.msg(data.msg);
	}
});
function fontSize(res){
	const clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
	if (!clientWidth) return;
	let fontSize = clientWidth / 1920;
	return res*fontSize;
}

数据

{
	"counts": 10,
	"page": 1,
	"pages": 1,
	"lists": [{
		"name": "高端化工",
		"value": 1
	}, {
		"name": "新一代信息技术",
		"value": 1
	}, {
		"name": "生物医药",
		"value": 2
	}, {
		"name": "其他",
		"value": 1
	}, {
		"name": "高端装备",
		"value": 0
	}, {
		"name": "新能源新材料",
		"value": 0
	}, {
		"name": "家居建材",
		"value": 0
	}, {
		"name": "现代金融",
		"value": 0
	}, {
		"name": "商贸物流",
		"value": 0
	}, {
		"name": "批零住餐",
		"value": 0
	}],
	"data": {
		"userIp": "127.0.0.1",
		"sum": 5
	},
	"countData": null,
	"code": 0,
	"message": null,
	"values": {},
	"success": true,
	"failed": false
}