PC-application/app/statistics/js/resident-analysis-charts.js

var labelBottom = {
	normal: {
		label: {
			show: false,
		},
		labelLine: {
			show: false
		}
	}
};
var jiaoFeiChart = null,
	healthChart = null,
	serviceChart = null,
	sexChart = null,
	ageChart = null;

//缴费情况
function jiaoFeiData(yiJiaoFeiData, weiJiaoFeiData) {
	jiaoFeiChart = echarts.init(document.getElementById('jiaoFeiChart'));
	var jiaoFeiOptions = {
		color: ['#12b7f5', '#FFC800'],
		series: [{
			type: 'pie',
			legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
			radius: ['50%', '70%'],
			center: ['50%', '50%'], //饼图的位置 
			data: [{
					name: '已缴费人数',
					value: yiJiaoFeiData,
					itemStyle: {
						normal: {
							label: {
								show: false,
							},
							labelLine: {
								show: false
							}
						}
					}
				},
				{
					name: '未缴费人数',
					value: weiJiaoFeiData,
					itemStyle: {
						normal: {
							label: {
								show: true,
								position: 'center',
								color: '#666',
								formatter: function(params) {
									return '缴费情况\n分析';
								}
							},
							labelLine: {
								show: false
							}
						}
					}
				}
			]
		}]
	};

	jiaoFeiChart.clear();
	jiaoFeiChart.setOption(jiaoFeiOptions);
}

//健康分布
function healthData(jkrqdata, hbrqdata, gwrqdata, hfqrqdata, wbzdata) {
	healthChart = echarts.init(document.getElementById('healthChart'));
	var healthOptions = {
		color: ['#12B7F5', '#FB5DAB', '#CD67FD', '#FFC800', '#61EB41'],
		series: [{
			type: 'pie',
			legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
			radius: ['50%', '70%'],
			center: ['25%', '50%'], //饼图的位置 
			data: [{
					name: '健康人群',
					value: jkrqdata,
					itemStyle: {
						normal: {
							label: {
								show: true,
								position: 'center',
								color: '#666',
								formatter: function(params) {
									return '健康分布\n分析';
								}
							},
							labelLine: {
								show: false
							}
						}
					}
				},
				{
					name: '患病人群',
					value: hbrqdata,
					itemStyle: labelBottom
				},
				{
					name: '高危人群',
					value: gwrqdata,
					itemStyle: labelBottom
				},
				{
					name: '恢复期人群',
					value: hfqrqdata,
					itemStyle: labelBottom
				},
				{
					name: '未标注',
					value: wbzdata,
					itemStyle: labelBottom
				}
			]
		}]
	};
	healthChart.clear();
	healthChart.setOption(healthOptions);
}

//服务分布
function serviceData(arr) {
	serviceChart = echarts.init(document.getElementById('serviceChart'));
	var serviceOptions = option = {
		calculable: true,
		grid: {
			y: 25,
			y2: 30,
			x: 20,
			x2: 20,
			borderColor: '#ffffff'
		},
		xAxis: [{
			type: 'category',
			axisLine: {
				show: true,
				lineStyle: {
					color: '#dcdcdc',
					width: 1
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: true,
				color: '#666'
			},
			splitArea: {
				show: false
			},
			splitLine: {
				show: false
			},
			data: ['普通人群', '老年人', '高血压', '糖尿病']
		}],
		yAxis: [{
			type: 'value',
			axisLine: {
				show: true,
				lineStyle: {
					color: '#dcdcdc',
					width: 1
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: false
			},
			splitArea: {
				show: false
			},
			splitLine: {
				show: false
			},
			axisLabel: {
				show: false
			}
		}],
		series: [{
			name: '服务分布比例',
			type: 'bar',
			barWidth: 20,
			itemStyle: {
				normal: {
					color: function(params) {
						var colorList = ['#12B7F5', '#61eb41', '#CD67FD', '#fb5dab'];
						return colorList[params.dataIndex]
					},
					label: {
						show: true,
						position: 'top',
						color: '#666',
						formatter: function(params) {
							return params.value + '%';
						}
					},
					barBorderRadius: 0
				}
			},
			data: arr
		}]
	};
	serviceChart.clear();
	serviceChart.setOption(serviceOptions);
}

//性别情况
function sexData(femaleData, maleData) {
	sexChart = echarts.init(document.getElementById('sexChart'));
	var sexOptions = {
		color: ['#12B7F5', '#FB5DAB'],
		series: [{
			type: 'pie',
			legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
			radius: ['50%', '70%'],
			center: ['50%', '50%'], //饼图的位置 
			data: [{
					name: '男性',
					value: maleData,
					itemStyle: {
						normal: {
							label: {
								show: true,
								position: 'center',
								color: '#666',
								formatter: function(params) {
									return '性别情况\n分析';
								}
							},
							labelLine: {
								show: false
							}
						}
					}
				},
				{
					name: '女性',
					value: femaleData,
					itemStyle: labelBottom
				}
			]
		}]
	};
	sexChart.clear();
	sexChart.setOption(sexOptions);
}

//年龄分布
function ageData(arr) {
	ageChart = echarts.init(document.getElementById('ageChart'));
	var ageOptions = {
		calculable: true,
		grid: {
			y: 25,
			y2: 30,
			x: 20,
			x2: 20,
			borderColor: '#ffffff'
		},
		xAxis: [{
			type: 'category',
			axisLine: {
				show: true,
				lineStyle: {
					color: '#dcdcdc',
					width: 1
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: true,
				color: '#666'
			},
			splitArea: {
				show: false
			},
			splitLine: {
				show: false
			},
			data: ['0-6岁', '7-18岁', '19-30岁', '31-50岁', '51-64岁', '65岁以上']
		}],
		yAxis: [{
			type: 'value',
			axisLine: {
				show: true,
				lineStyle: {
					color: '#dcdcdc',
					width: 1
				}
			},
			axisTick: {
				show: false
			},
			axisLabel: {
				show: false
			},
			splitArea: {
				show: false
			},
			splitLine: {
				show: false
			},
			axisLabel: {
				show: false
			}
		}],
		series: [{
			name: '年龄分布比例',
			type: 'bar',
			barWidth: 40,
			itemStyle: {
				normal: {
					color: function(params) {
						var colorList = ['#12B7F5', '#FB5DAB', '#CD67FD', '#FFC800', '#61EB41', '#909090'];
						return colorList[params.dataIndex]
					},
					label: {
						show: true,
						position: 'top',
						formatter: function(params) {
							return params.value;
						}
					},
					barBorderRadius: 0
				}
			},
			data: arr
		}]
	};
	ageChart.clear();
	ageChart.setOption(ageOptions);
}

window.onresize = function() {
	jiaoFeiChart.resize();
	healthChart.resize();
	serviceChart.resize();
	sexChart.resize();
	ageChart.resize();
}