echarts 圆环图中间显示数据下边显示标题

Diana ·

更新时间:2024-11-14

· 727 次阅读

echarts 圆环图中间显示数据下边显示标题

$(function(){
	getqykpnzqdata("qykpnzqjn","qykpnzqqn",wmgdseletj);
})
/**
 * 获得数据并显示echarts图
 * idnamejn : 显示今年数据的idname
 * idnameqn : 显示去年数据的idname
 * wmgdseletj 查询条件  select 选择的年份 
 */
function getqykpnzqdata(idnamejn,idnameqn,wmgdseletj){
	var titleval = '今年';
	var yhcolor = "#00ffa8";
	var data = 136;
	qykpecharts(idnamejn,titleval,yhcolor,data);   //显示今年圆环图
	titleval = "去年";
	yhcolor = "#ed5542";
	data = 156;
	qykpecharts(idnameqn,titleval,yhcolor,data);  //显示去年年圆环图
}
/*
 * idname : 显示图像的id名称
 * titleval : 今年/去年
 * yhcolor ： 圆环显示的颜色   （有数据的部分，没有数据的有默认值）
 * data : 要显示的数据值
 */
function qykpecharts(idname,titleval,yhcolor,data){
	var myChart = echarts.init(document.getElementById(idname));
	option = {
		    title: {
		        text: titleval,
		        x: 'center',
		        y: 'center',
		        textStyle: {
		            fontSize:20,
		            fontWeight:'normal',
		            color: ['#fff']
		        },
		        subtextStyle: {
		            color: '#666',   
		            fontSize: 30
		        },
		        top:170,   //标题文字距离顶部距离
		    },
		    series: [
		        {
		            type: 'pie',
		            radius: ['50%', '70%'],
		            label: {
		                normal: {
		                    show: false,
		                }
		             },
		            data: [
		                {
		                    value: data, name: titleval,
		                    label: {
		                        normal: {
		                            formatter: function(params){
		                                return params.value;
		                            },
		                            position: 'center',
		                            show: true,
		                            textStyle: {
		                                fontSize: '20',
		                                fontWeight: 'bold',
		                                color: '#fff'
		                            }
		                        }
		                    },
		                    itemStyle:{   //自定义圆环图颜色
				            	normal:{
		                            color:yhcolor   
				            	}
		                    }
		                },
		                {
		                	value: 500, 
		                	name: '剩余',
		                	itemStyle:{   //自定义圆环图颜色
			            	normal:{
	                            color:'#05458d'
	                        }
	                    }
		                }
		            ]
		        }
		    ]
	}
	myChart.setOption(option);
}

显示效果：

调用了两边显示两个echarts