const SetHome = new function() {

	let self = this;

	self.C1Chart;
	self.C2Chart;
	self.C7Chart;

	self.Set = function() {

	}

	self.RunC1 = function(  ) {

		var Chart1Obj = document.getElementById('Chart1');

		self.C1Chart = echarts.init( Chart1Obj );

		var option = {
			textStyle: {
				color: '#FFFFFF'
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					crossStyle: {
						color: '#FFFFFF'
					}
				}
			},
			grid: {
				top: 15,
				left: '0%',
				right: 230,
				bottom: '0%',
				containLabel: true
			},
			toolbox: {
				feature: {}
			},
			legend: {
				right: 'right',
				data: ['運動與休閒車輛', '其他運動與休閒用品', '維修休閒車輛與運動用品', '參與俱樂部、運動中心會員費', '觀賞運動門票、入場費'],
				textStyle: {
					color: '#FFFFFF'
				}
			},
			xAxis: [
				{
					type: 'category',
					data: ['2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017'],
					axisPointer: {
						type: 'shadow'
					},
					axisLabel: {
						color: '#FFFFFF',
						interval: 0,
					}
				}
			],
			yAxis: [
				{
					type: 'value',
				},
				{
					type: 'value',
					name: '單位︰美元 ( 億 )',
					nameLocation:'center'
				}
			],
			series: [
				{
					name: '運動與休閒車輛',
					type: 'line',
					data: [491,514,524,471,370,356,370,403,443,473,511,528,648]
				},
				{
					name: '其他運動與休閒用品',
					type: 'line',
					data: [1300,1371,1402,1400,1314,1342,1399,1475,1540,1610,1702,1781,1772]
				},
				{
					name: '維修休閒車輛與運動用品',
					type: 'line',
					data: [49,50,51,49,42,44,45,47,48,51,52,57,60]
				},
				{
					name: '參與俱樂部、運動中心會員費',
					type: 'line',
					data: [343,374,407,412,391,395,406,424,441,457,479,505,548]
				},
				{
					name: '觀賞運動門票、入場費',
					type: 'line',
					data: [157,173,190,194,188,192,204,206,217,228,242,260,269]
				}
			]
		};
		self.C1Chart.setOption(option);
	}

	self.RunC2 = function(  ) {

		var Chart2Obj = document.getElementById('Chart2');

		self.C2Chart = echarts.init( Chart2Obj );

		var option = {
			textStyle: {
				color: '#FFFFFF'
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					crossStyle: {
						color: '#FFFFFF'
					}
				}
			},
			grid: {
				top: 15,
				left: '0%',
				right: 230,
				bottom: '0%',
				containLabel: true
			},
			toolbox: {
				feature: {}
			},
			legend: {
				right: 'right',
				data: ['參與性運動消費支出總計', '觀賞性運動消費支出總計', '運動彩券支出', '運動裝備消費支出總計', '電競消費支出'],
				textStyle: {
					color: '#FFFFFF'
				}
			},
			xAxis: [
				{
					type: 'category',
					data: ['2014', '2015', '2016', '2017', '2018'],
					axisPointer: {
						type: 'shadow'
					},
					axisLabel: {
						color: '#FFFFFF',
						interval: 0,
					}
				}
			],
			yAxis: [
				{
					type: 'value',
				},
				{
					type: 'value',
					name: '單位︰新台幣 ( 億 )',
					nameLocation:'center'
				}
			],
			series: [
				{
					name: '參與性運動消費支出總計',
					type: 'line',
					data: [282.1,281.3,283.4,287.6,290.0]
				},
				{
					name: '觀賞性運動消費支出總計',
					type: 'line',
					data: [44.0,45.3,45.9,46.6,47.1]
				},
				{
					name: '運動彩券支出',
					type: 'line',
					data: [240.5,281.5,311.2,330.6,434.2]
				},
				{
					name: '運動裝備消費支出總計',
					type: 'line',
					data: [592.6,580.9,586.6,597.5,604.3]
				},
				{
					name: '電競消費支出',
					type: 'line',
					data: [,,,6.3,6.9]
				}
			]
		};
		self.C2Chart.setOption(option);
	}

	self.RunC4 = function() {

		var option = {
			tooltip: {
				trigger: 'item'
			},
			xAxis: {
				type: 'category',
				data: ['98年', '99年', '100年', '101年', '102年', '103年', '104年', '105年', '106年', '107年'],
				show:false
			},
			yAxis: {
				type: 'value',
				min: 'dataMin',
				max: 'dataMax',
				show:false
			},
			series: [{
				type: 'line'
			}]
		};

		var Chart41Obj = document.getElementById('Chart41');
		self.C41Chart = echarts.init( Chart41Obj );
		option.series[0].data = [3.22,3.23,3.28,3.21,3.13,3.13,3.08,3.00,3.08,3.16];
		self.C41Chart.setOption(option);

		var Chart42Obj = document.getElementById('Chart42');
		self.C42Chart = echarts.init( Chart42Obj );
		option.series[0].data = [1246310,1298640,1251519,1278278,1279195,1292604,1314031,1320834,1344538,1379305];
		self.C42Chart.setOption(option);

		var Chart43Obj = document.getElementById('Chart43');
		self.C43Chart = echarts.init( Chart43Obj );
		option.series[0].data = [387053,402056,381561,398217,408688,412973,426633,440278,436538,436489];
		self.C43Chart.setOption(option);

		var Chart44Obj = document.getElementById('Chart44');
		self.C44Chart = echarts.init( Chart44Obj );
		option.series[0].data = [1340407,1389812,1320307,1326978,1317128,1308966,1330664,1320834,1336386,1357584];
		self.C44Chart.setOption(option);

		var Chart45Obj = document.getElementById('Chart45');
		self.C45Chart = echarts.init( Chart45Obj );
		option.series[0].data = [416275,430282,402533,413389,420808,418200,432034,440278,433892,429615];
		self.C45Chart.setOption(option);

		var Chart46Obj = document.getElementById('Chart46');
		self.C46Chart = echarts.init( Chart46Obj );
		option.series[0].data = [92.98,93.44,94.79,96.33,97.12,98.75,98.75,100.00,100.61,101.60];
		self.C46Chart.setOption(option);
	}

	self.RunC7 = function(  ) {

		var Chart7Obj = document.getElementById('Chart7');

		self.C7Chart = echarts.init( Chart7Obj );

		var option = {
		    tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				},
				formatter: function (datas) {
					var res = datas[0].name + '<br/>'
					for( var i = 0, length = datas.length; i < length; i++ ) {
						res += datas[i].marker + datas[i].seriesName + '：' + datas[i].value + '%' + '<br/>'
					}
					return res
				}
		    },
		    legend: {
		        data: ['108年', '107年', '106年', '105年'],
				left: 'right',
				textStyle: {
					color: '#FFFFFF'
				}
		    },
			grid: {
				top: '10%',
				left: '0%',
				right: '0%',
				bottom: '0%',
				containLabel: true
			},
		    xAxis: {
		        type: 'value',
		        min:0,
		        max:60,
		        boundaryGap: [0, 0.01],
				axisLabel: {
					color: '#FFFFFF',
					align: 'right',
					formatter: '{value}%'
				}
		    },
		    yAxis: {
		        type: 'category',
		        data: ['學校運動場地', '公園', '人行道/道路', '國民運動中心/運動公園'],
				axisLabel: {
					color: '#FFFFFF'
				}
		    },
		    series: [
				{
					name: '108年',
					type: 'bar',
					data: [34.5,33.2,23.9,10.0]
				},
				{
					name: '107年',
					type: 'bar',
					data: [34.7,33.0,18.6,10.2]
				},
				{
					name: '106年',
					type: 'bar',
					data: [38.7,34.0,15.6,10.0]
				},
				{
					name: '105年',
					type: 'bar',
					data: [27.1,25.5,18.0,7.8]
				}
		    ]
		};
		self.C7Chart.setOption(option);
	}
}


window.addEventListener( "load", function ( event ) {
	SetHome.Set();
	if( document.getElementById('Chart1') ) { SetHome.RunC1({}); }
	if( document.getElementById('Chart2') ) { SetHome.RunC2({}); }
	if( document.getElementById('Chart4') ) { SetHome.RunC4({}); }
	if( document.getElementById('Chart7') ) { SetHome.RunC7({}); }
}, false );

window.addEventListener( "resize", function ( event ) {
	if( document.getElementById('Chart1') ) { SetHome.C1Chart.resize(); }
	if( document.getElementById('Chart2') ) { SetHome.C2Chart.resize(); }
	if( document.getElementById('Chart4') ) {
		SetHome.C41Chart.resize();
		SetHome.C42Chart.resize();
		SetHome.C43Chart.resize();
		SetHome.C44Chart.resize();
		SetHome.C45Chart.resize();
		SetHome.C46Chart.resize();
	}
	if( document.getElementById('Chart7') ) { SetHome.C7Chart.resize(); }
}, false );