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

在这里插入图片描述
在这里插入图片描述

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} 
{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
}


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部