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 = {
	    tooltip: {
	        trigger: 'item',
	    },
		color: ['#12b7f5', '#FFC800'],
		series: [{
			type: 'pie',
//			legendHoverLink: false,
//			hoverAnimation: false,
			avoidLabelOverlap: false,
//			silent: true,
			radius: ['50%', '70%'],
			center: ['50%', '50%'], //饼图的位置 
			labelLine: {
                normal: {
                    show: false
                }
            },
			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 = {
	    tooltip: {
            trigger: 'item',
        },
		color: ['#12B7F5', '#FB5DAB', '#CD67FD', '#FFC800', '#61EB41'],
		series: [{
			type: 'pie',
//			legendHoverLink: false,
//			hoverAnimation: false,
			avoidLabelOverlap: false,
			radius: ['50%', '70%'],
			center: ['25%', '50%'], //饼图的位置 
			labelLine: {
                normal: {
                    show: false
                }
            },
			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(nameArr, rateArr, colorList, year) {
	serviceChart = echarts.init(document.getElementById('serviceChart'));
	var serviceOptions = {
		//		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,
				interval: 0,
				textStyle: {
					color: '#333',
					fontSize: 14,
				},
//				formatter: function(val) {
//					if(val.length > 4) {
//						return val.substring(0, 4) + '…'
//					} else {
//						return val
//					}
//				},    
			},
			splitArea: {
				show: false
			},
			splitLine: {
				show: false
			},
			data: nameArr
		}],
		yAxis: [{
			type: 'value',
			show: false,
			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,
			barMinHeight: 1,
			label: {
				normal: {
					show: true,
					position: 'top',
					formatter: '{c}%',
					textStyle: {
						color: '#333',
						fontSize: 14,
					},
				}
			},
			itemStyle: {
				normal: {
					color: function(params) {
						return colorList[params.dataIndex];
					},
				}
			},
			data: rateArr
		}]
	};
	if(year != "2016") {
		serviceOptions.dataZoom = [{
			type: 'inside',
			orient: 'horizontal',
			filterMode: 'none',
			zoomLock: true,
			zoomOnMouseWheel: false,
			preventDefaultMouseMove: true,
			xAxisIndex: 0,
			start: 0,
			end: 40
		},{
		    show: false,
            start: 0,
            end: 40,
            type: 'slider',
            zoomLock: true,
		}]
	}
	serviceChart.clear();
	serviceChart.setOption(serviceOptions);
}

//性别情况
function sexData(femaleData, maleData) {
	sexChart = echarts.init(document.getElementById('sexChart'));
	var sexOptions = {
	    tooltip: {
            trigger: 'item',
        },
		color: ['#12B7F5', '#FB5DAB'],
		series: [{
			type: 'pie',
//			legendHoverLink: false,
//			hoverAnimation: false,
			avoidLabelOverlap: false,
			radius: ['50%', '70%'],
			center: ['50%', '50%'], //饼图的位置 
			labelLine: {
                normal: {
                    show: false
                }
            },
			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();
}