require.config({
        paths: {
            echarts: './js'
        }
    });
    
function activateChart() {    
    // Step:4 require echarts and use it in the callback.
    require(
        [
            'echarts',
            'echarts/chart/pie',
            'echarts/chart/radar',
            'echarts/chart/bar',
            'echarts/chart/line'
			
        ],
        function (ec) {
			
			// --- 性別分佈 STAR ---
				
			var chartGender = ec.init(document.getElementById('chart-gender'));
            chartGender.setOption({
				
				legend: {
					orient : 'horizontal',
					x : 'center',
					data:['女生','男生']
				},
				color: ['#fdc500','#3b88ce'],
				calculable : true,
				series : [
					{
						 itemStyle : {
							  normal : {
							  	label : {
							  		position : 'inner',
							  		textStyle:{fontSize:16},
                        			formatter: "{b} \n {c}%" // --- 數值顯示格式 --- //
							  			},
						 		labelLine: {show: false,}
						 
										},
						 			},
							
						type:'pie',
						radius : '55%',
						center: ['50%', '40%'],
                       startAngle: 10,  
                       endAngle : -140, 
						data:[
							{value:35.63, name:'男生'},
							{value:64.37, name:'女生'},
						]
					}
				]
			});
                    
			// --- 性別分佈 END ---
			
			// --- 年齡分佈 STAR ---
				
			var chartYear = ec.init(document.getElementById('chart-year'));
            chartYear.setOption({
				calculable : true,
				legend: {
					orient : 'horizontal',
					x : 'center',
					textStyle:{fontSize:16},
					
					data:['30-39歲','40-49歲','50-59歲','60歲以上']
				},
				color: ['#32CD32','#9370DB','#3b88ce', '#fdc500'],
				series : [
					{
						itemStyle : {
							  normal : {
							  	label : {
							  		position : 'inner',
							  		textStyle:{fontSize:16},
                        			formatter: "{c}%" // --- 數值顯示格式 --- //
							  			},
						 		labelLine: {show: false,}
						 
										},
						 			},
						name:'',
						type:'pie',
						radius : '55%',
						center: ['50%', '40%'],
						data:[
							{value:21.39, name:'30-39歲'},
							{value:23.44, name:'40-49歲'},
							{value:31.80, name:'50-59歲'},
							{value:23.37, name:'60歲以上'}
						]
					}
				]
			});
			// --- 年齡分佈 END ---
			
			// --- 教育程度分佈 STAR ---
				
			var chartEducation = ec.init(document.getElementById('chart-education'));
            chartEducation.setOption({
				legend: {
					orient : 'horizontal',
					x : 'center',
					textStyle:{fontSize:16},
					
					data:['小學以下(含肄業)','國(初)中(含肄業)','高中(職)(含肄業)','大學(專)(含肄業)','研究所以上(含肄業)']
				},
				color: ['#316fa7','#e9ba15','#3b88ce', '#fdc500', '#77B800'],
				series : [
					{
						itemStyle : {
							  normal : {
							  	label : {
							  		textStyle:{fontSize:16},
                        			formatter: "{c}%" // --- 數值顯示格式 --- //
							  			},
						 		labelLine: {show: true,}
						 
										},
						 			},
						name:'',
						type:'pie',
						radius : '55%',
						center: ['50%', '60%'],
                       startAngle: 10,  
                       endAngle : -140, 
						data:[
							{value:6.65, name:'小學以下(含肄業)'},
							{value:8.53, name:'國(初)中(含肄業)'},
							{value:31.64, name:'高中(職)(含肄業)', selected:true},
							{value:44.49, name:'大學(專)(含肄業)', selected:true},
							{value:8.69, name:'研究所以上(含肄業)'},
						]
					}
				]
			});
			// --- 教育程度分佈 END ---
            
			// --- 喝酒狀態分佈 STAR ---
				
			var chartAlcohol = ec.init(document.getElementById('chart-alcohol'));
            chartAlcohol.setOption({
					grid:{x:30,width:'90%'},
				
					tooltip : {
						trigger: 'axis'
					},
					legend: {
						data:['男','女'],
						textStyle:{fontSize:16},
					},
					calculable : true,
					color: ['#3b88ce', '#fdc500'],
					xAxis : [
						{
							type : 'category',
							data : ['沒有或偶爾喝酒\n(未達150c.c./每週，\n持續六個月之喝酒量)','已戒酒\n(持續六個月\n以上沒有喝酒)','持續喝酒\n(150c.c./每週，\n持續六個月之喝酒量)']
						}
					],
					yAxis : [
						{
							type : 'value',
							axisTick : {show: false},
							
						}
					],
					series : [
						{
							name:'男',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:16}}
									}
							},
							type:'bar',
							data:[81.64, 5.58, 12.77],
							
						},
						{
							name:'女',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:16}}
									}
							},
							type:'bar',
							data:[97.38, 0.80, 1.82],
							
						}
					]
			});
			// --- 喝酒狀態分佈 END ---
			
			// --- 吸菸分佈 STAR ---
				
			var chartSmoke = ec.init(document.getElementById('chart-smoke'));
            chartSmoke.setOption({
					grid:{x:30,width:'90%'},
					tooltip : {
						trigger: 'axis'
					},
					legend: {
						data:['男','女'],
						textStyle:{fontSize:16},
					},
					calculable : true,
					color: ['#3b88ce', '#fdc500'],
					xAxis : [
						{
							type : 'category',
							data : ['沒有或偶爾吸菸\n(不曾吸菸及持續\n吸菸未滿六個月以上)','已戒除\n(六個月以上\n無習慣性吸菸)','持續吸菸\n(持續吸菸\n六個月以上)']
						}
					],
					yAxis : [
						{
							type : 'value',
							axisTick : {show: false},
							
						}
					],
					series : [
						{
							name:'男',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:12}}
									}
							},
							type:'bar',
							data:[56.30, 22.75, 20.95],
							
						},
						{
							name:'女',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:12}}
									}
							},
							type:'bar',
							data:[94.85, 2.26, 2.89],
							
						}
					]
			});
			// --- 吸菸分佈 END ---
			
			// --- 嚼檳榔狀態分佈 STAR ---
			var chartCatechu = ec.init(document.getElementById('chart-catechu'));
            chartCatechu.setOption({
					grid:{x:30,width:'90%'},
				
					tooltip : {
						trigger: 'axis'
					},
					legend: {
						data:['男','女'],
						textStyle:{fontSize:16},
					},
					calculable : true,
					color: ['#3b88ce', '#fdc500'],
					xAxis : [
						{
							type : 'category',
							data : ['沒有嚼檳榔','戒檳榔','持續嚼檳榔']
						}
					],
					yAxis : [
						{
							type : 'value',
							axisTick : {show: false},
							
						}
					],
					series : [
						{
							name:'男',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:12}}
									}
							},
							type:'bar',
							data:[83.40, 11.04, 5.53],
							
						},
						{
							name:'女',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:12}}
									}
							},
							type:'bar',
							data:[99.49, 0.28, 0.18],
							
						}
					]
			});
			// --- 嚼檳榔狀態分佈 END ---
                    
			// --- 運動習慣分佈 STAR ---
				
			var chartExercise = ec.init(document.getElementById('chart-exercise'));
            chartExercise.setOption({
					grid:{x:30,width:'90%'},
				
					tooltip : {
						trigger: 'axis'
					},
					legend: {
						data:['男','女'],
						textStyle:{fontSize:16},
					},
					calculable : true,
					color: ['#3b88ce', '#fdc500'],
					xAxis : [
						{
							type : 'category',
							data : ['平時沒有運動習慣 (每周至少三次，每次30分鐘以上)','平時有運動習慣 (每周至少三次，每次30分鐘以上)']
						}
					],
					yAxis : [
						{
							type : 'value',
							axisTick : {show: false},
							
						}
					],
					series : [
						{
							name:'男',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:16}}
									}
							},
							type:'bar',
							data:[56.94, 43.13],
							
						},
						{
							name:'女',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:16}}
									}
							},
							type:'bar',
							data:[58.93, 41.12],
							
						}
					]
			});
			// --- 運動習慣分佈 END ---
			
			// --- 過敏、骨科、肺部與心血管疾病分布 STAR ---
				$('#chart-disease').waypoint(function() {
            var chartDisease = ec.init(document.getElementById('chart-disease'));
            chartDisease.setOption({
					legend: {
                                                data:['男','女'],
                                                textStyle:{fontSize:16},
                                        },
                                        calculable : true,
                                        color: ['#3b88ce', '#fdc500'],
                                        xAxis : [
                                                {
                                                        type : 'value',
                                                        boundaryGap : [0,0.05],
                                                }
                                        ],
                                        yAxis : [
                                                {
                                                        type : 'category',
                                                        data : ['過敏','骨質疏鬆','關節炎','痛風','肺氣腫或\n支氣管炎','氣喘','瓣膜性心臟病','冠心症','心律不整','其他心臟病','高血脂症','高血壓','中風']
                                                }
                                        ],
                                        series : [
                                                {
							name:'男',
                                        itemStyle : {
                                                                normal: {
                                                                        label : {show: true,formatter: "{c}%",textStyle:{fontSize:12}}
                                                                        }
                                                        },
                                                        type:'bar',
                                                        data:[7.53,2.56,3.35,9.75,1.54,3.20,2.47,2.26,4.29,1.39,8.97,17.38,1.07],

                                                },
                                                {
                                                        name:'女',
                                        itemStyle : {
                                                                normal: {
                                                                        label : {show: true,formatter: "{c}%",textStyle:{fontSize:12}}
                                                                        }
                                                        },
                                                        type:'bar',
                                                        data:[10.47,5.88,5.95,0.69,1.08,3.33,4.51,0.72,4.76,0.96,6.37,10.23,0.36],
                                                }
                                        ]
                                });
                        }, {
                          triggerOnce: true,
                          //Trigger the chart when the bottom of the element hits the bottom of the viewport.
                          offset: '80%'
                        });

			// --- 過敏、骨科、肺部與心血管疾病分布 END ---
			
			// --- 糖尿病、消化道、心理神經系統、其他疾病分布 STAR ---
				
			var chartDiseaseB = ec.init(document.getElementById('chart-diseaseB'));
            chartDiseaseB.setOption({
					grid:{x:30,width:'90%'},
					tooltip : {
						trigger: 'axis'
					},
					legend: {
						data:['男','女'],
						textStyle:{fontSize:16},
					},
					calculable : true,
					color: ['#3b88ce', '#fdc500'],
					xAxis : [
						{
							type : 'category',
							data : ['糖尿病','消化性潰瘍','胃食道逆流','大腸急躁症','心理情緒疾病','神經系統疾病','肝膽結石','眩暈','腎結石']
						}
					],
					yAxis : [
						{
							type : 'value',
							axisTick : {show: false},
							
						}
					],
					series : [
						{
							name:'男',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:12}}
									}
							},
							type:'bar',
							data:[6.87,17.01,12.28,2.60,3.22,2.20,4.64,3.13,10.87],
							
						},
						{
							name:'女',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:12}}
									}
							},
							type:'bar',
							data:[4.31,13.63,12.96,2.28,5.56,3.98,4.50,7.16,4.15],
							
						}
					]
			});
			// --- 糖尿病、消化道、心理神經系統、其他疾病分布 END ---
			
			// --- 女性疾病分布 STAR ---
				
			var chartDiseaseC = ec.init(document.getElementById('chart-diseaseC'));
            chartDiseaseC.setOption({
				
					calculable : true,
					color: ['#3b88ce'],
					xAxis : [
						{
							type : 'category',
							data : ['嚴重經痛','子宮肌瘤','卵巢囊腫','子宮內膜異位','子宮及子宮頸瘜肉']
						}
					],
					yAxis : [
						{
							type : 'value',
							axisTick : {show: false},
							
						}
					],
					series : [
						{
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:16}}
									}
							},
							type:'bar',
							data:[3.82,21.09,5.45,6.70,2.90],
							
						}
					]
			});
			// --- 女性疾病分布 END ---
			
			// --- 家族癌症史分布 STAR ---
			 $('#chart-diseaseD').waypoint(function() {
            var chartDiseaseD = ec.init(document.getElementById('chart-diseaseD'));
            chartDiseaseD.setOption({
                                color: ['#3b88ce'],
                                        calculable : true,
                                        xAxis : [
                                                {
                                                        type : 'value',
                                                        boundaryGap : [0,0.05],
                                                }
                                        ],
                                        yAxis : [
                                                {
                                                        type : 'category',
                                                        data : ['肝癌','肺癌','乳癌','胃癌','大腸直腸癌','鼻咽癌','前列腺癌','子宮頸癌','子宮癌','卵巢癌']
                                                }
                                        ],
                                        series : [
                                                {
                                                        itemStyle : {
                                                                normal: {
                                                                        label : {
                                                                                show: true,
                                                                                textStyle:{fontSize:12},
										formatter: "{c}%"
                                                                                },
                                                                                }
                                                                        },
                                                        type:'bar',
							data:[8.45,6.84,5.64,3.42,7.65,1.84,1.71,3.06,1.24,0.61],
                                                }
                                        ]
                                });
                        }, {
                          triggerOnce: true,
                          //Trigger the chart when the bottom of the element hits the bottom of the viewport.
                          offset: '80%'
                        });
	
			// --- 家族癌症史分布 END ---
			
			// --- BMI分布 STAR ---
				
			var chartBMI = ec.init(document.getElementById('chart-bmi'));
            chartBMI.setOption({
					grid:{x:30,width:'90%'},
					tooltip : {
						trigger: 'axis'
					},
					legend: {
						data:['男','女'],
						textStyle:{fontSize:16},
					},
					calculable : true,
					color: ['#3b88ce', '#fdc500'],
					xAxis : [
						{
							type : 'category',
							data : ['<18.5','18.5-24','24-27','>27']
						}
					],
					yAxis : [
						{
							type : 'value',
							axisTick : {show: false},
							
						}
					],
					series : [
						{
							name:'男',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:12}}
									}
							},
							type:'bar',
							data:[1.43,36.36,35.51,26.70],
							
						},
						{
							name:'女',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:12}}
									}
							},
							type:'bar',
							data:[4.31,56.95,22.84,15.90],
							
						}
					]
			});
			// --- BMI分布 END ---
			
			// --- 體脂率分布 STAR ---
				
			var chartBodyfat = ec.init(document.getElementById('chart-bodyfat'));
            chartBodyfat.setOption({
					grid:{x:30,width:'90%'},
					tooltip : {
						trigger: 'axis'
					},
					legend: {
						data:['男','女'],
						textStyle:{fontSize:16},
					},
					calculable : true,
					color: ['#3b88ce', '#fdc500'],
					xAxis : [
						{
							type : 'category',
							data : ['≦17%       ≦20%','17-23%    20-27%','23-25%    27-30%','>25%      >30%']
						}
					],
					yAxis : [
						{
							type : 'value',
							axisTick : {show: false},
							
						}
					],
					series : [
						{
							name:'男',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:12}}
									}
							},
							type:'bar',
							data:[12.28,38.81,15.92,32.99],
							
						},
						{
							name:'女',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:12}}
									}
							},
							type:'bar',
							data:[2.17,20.46,17.88,59.49],
							
						}
					]
			});
			// --- 體脂率分布 END ---
			
			// --- 醣化血色素分布 STAR ---
				
			var chartHemoglobin = ec.init(document.getElementById('chart-hemoglobin'));
            chartHemoglobin.setOption({
					grid:{x:30,width:'90%'},
					tooltip : {
						trigger: 'axis'
					},
					legend: {
						data:['男','女'],
						textStyle:{fontSize:16},
					},
					calculable : true,
					color: ['#3b88ce', '#fdc500'],
					xAxis : [
						{
							type : 'category',
							data : ['≦6%','6-7%','>7%']
						}
					],
					yAxis : [
						{
							type : 'value',
							axisTick : {show: false},
							
						}
					],
					series : [
						{
							name:'男',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:12}}
									}
							},
							type:'bar',
							data:[81.58,12.66,5.70],
							
						},
						{
							name:'女',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:12}}
									}
							},
							type:'bar',
							data:[85.63,10.75,3.59],
							
						}
					]
			});
			// --- 醣化血色素分布 END ---
			
			// --- 飯前血糖分布 STAR ---
				
			var chartAftermeal = ec.init(document.getElementById('chart-aftermeal'));
            chartAftermeal.setOption({
					grid:{x:30,width:'90%'},
					tooltip : {
						trigger: 'axis'
					},
					legend: {
						data:['男','女'],
						textStyle:{fontSize:16},
					},
					calculable : true,
					color: ['#3b88ce', '#fdc500'],
					xAxis : [
						{
							type : 'category',
							data : ['≦70','70-105','>105']
						}
					],
					yAxis : [
						{
							type : 'value',
							axisTick : {show: false},
							
						}
					],
					series : [
						{
							name:'男',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:12}}
									}
							},
							type:'bar',
							data:[0.13,84.08,15.79],
							
						},
						{
							name:'女',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:12}}
									}
							},
							type:'bar',
							data:[0.23,90.50,9.27],
							
						}
					]
			});
			// --- 飯前血糖分布 END ---
			
			// --- 其他檢驗數值異常分布 STAR ---
				
			var chartOther = ec.init(document.getElementById('chart-other'));
            chartOther.setOption({
					grid:{x:30,width:'90%'},
					tooltip : {
						trigger: 'axis'
					},
					legend: {
						data:['男','女'],
						textStyle:{fontSize:16},
					},
					calculable : true,
					color: ['#3b88ce', '#fdc500'],
					xAxis : [
						{
							type : 'category',
							data : ['WHR','HTN','TC','TG','HDL','LDL','SGOT','SGPT','AFP','UA','MA']
						}
					],
					yAxis : [
						{
							type : 'value',
							axisTick : {show: false},
							
						}
					],
					series : [
						{
							name:'男',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:12}}
									}
							},
							type:'bar',
							data:[49.51,15.29,38.44,14.91,23.32,38.48,12.16,18.71,0.24,13.41,18.38],
							
						},
						{
							name:'女',
            				itemStyle : { 
								normal: {
									label : {show: true, position: 'top',formatter: "{c}%",textStyle:{fontSize:12}}
									}
							},
							type:'bar',
							data:[75.60,8.48,44.82,6.66,28.46,36.57,6.99,7.82,0.49,1.35,17.82],
							
						}
					]
			});
			// --- 其他檢驗數值異常分布 END ---
			
			// --- 生物檢體 STAR ---
			 $('#chart-specimen').waypoint(function() {
            var chartSpecimen = ec.init(document.getElementById('chart-specimen'));
            chartSpecimen.setOption({
                                color: ['#3b88ce'],
                                        calculable : true,
                                        xAxis : [
                                                {
                                                        type : 'value',
                                                        boundaryGap : [0,0.05],
                                                }
                                        ],
                                        yAxis : [
                                                {
                                                        type : 'category',
                                                        data : ['血漿(-196℃)','血漿(-80℃)','尿液(-196℃)','尿液(-80℃)','白血球細胞\n(-196℃)','DNA(-80℃)']
                                                }
                                        ],
                                        series : [
                                                {
                                                        itemStyle : {
                                                                normal: {
                                                                        label : {
                                                                                show: true,
                                                                                textStyle:{fontSize:12},
                                                                                },
                                                                                }
                                                                        },
                                                        type:'bar',
							data:[443355,435495,266236,262033,105880,352634],
                                                }
                                        ]
                                });
                        }, {
                          triggerOnce: true,
                          //Trigger the chart when the bottom of the element hits the bottom of the viewport.
                          offset: '80%'
                        });
	
			// --- 生物檢體 END ---
			
						
						
					}
				);
}