<template>
	<el-main>
		<el-card>
			<div>
				<div id="title" 
				style="width: 850px;padding-left:10px; height: 50px;background-color: rgb(204,51,0);color:white;font-size: 30px;line-height: 50px">
				Decarbonization Roadmap of Cement Industry in China
				</div>
				<div id="title" 
				style="width: 850px;padding-left:10px; height: 50px;background-color: rgb(204,51,0);color:white;font-size: 30px;line-height: 50px">
				（when low carbon cement technology breakthroughs）
				</div>
				
				<div id="main" style="width: 1200px; height: 600px;border: 4px solid rgb(204,51,0)"></div>
			
				<div id="mains" style="width: 1200px;height: 600px;position: absolute;top: 205px;"></div>
				<div id="main1" style="width: 1200px;height: 600px;position: absolute;top: 205px;"></div>
				<div id="main2" style="width: 1200px;height: 600px;position: absolute;top: 205px;"></div>
			</div>
			<div style="position: relative;">
				<div id="title" 
				style="width: 600px;padding-left:10px; height: 50px;background-color: rgb(204,51,0);color:white;font-size: 30px;line-height: 50px">
				水泥行业碳排放强度趋势图
				</div>
				 <div class="yAxisText">碳排放强度（kg CO2/吨水泥）</div>
				<div class="yearText">{{ currentYear }}</div>
				 <div id="mainLine" style="width: 700px;height: 600px;border: 4px solid rgb(204,51,0);padding-left: 20px;"></div>
			</div>
		</el-card>
	</el-main>
</template>

<script>
import { stack } from "d3";
import * as echarts from "echarts";
const updateFrequency = 2000;
const dimension = 0;
// const countryColors = {
// 	水泥碳排放: "rgb(244,192,0)",
// 	石膏板排放: "rgb(242,119,36)",
// 	建筑卫生陶瓷排放: "rgb(103,169,59)",
// 	玻璃排放: "rgb(77,148,211)",
// 	玻纤排放: "rgb(159,159,159)",
// 	墙体材料: "rgb(84,112,198)",
// };
const countryColors = {
	'Low carbon cement': "rgb(244,192,0)",
	'Alternative Fuel': "rgb(242,119,36)",
	'Clean Energy Electricity': "rgb(103,169,59)",
	'Energy Efficiencylmprovement Technology': "rgb(77,148,211)",
	'CCUS': "rgb(159,159,159)",
};
const years = [2021, 2025, 2030, 2040, 2050, 2060];
export default {
	name: "chart",
	data() {
		return {
			timeInterval:null,
			currentYear: 2021,
			currentIndex: 0,
		};
	},
	mounted() {
		this.intiLineChart();
		this.intiLine();
		this.intiBar();
	},
	methods: {
		intiBar(){
			//柱状
			var chartDom = document.getElementById("main");
			var myChart = echarts.init(chartDom);
			var option;
			let startIndex = 0;
			let data1 = [
				["Income", "Life Expectancy", "Population", "Country", "Year"],
				[0, 34.05, 0, "Low carbon cement", 2021],
				[0, 39, 0, "Alternative Fuel", 2021],
				[0, 32, 0, "Clean Energy Electricity", 2021],
				[0, 32.2, 0, "Energy Efficiencylmprovement Technology", 2021],
				[0, 36.57, 0, "CCUS", 2021],

				[6, 34.05, 6, "Low carbon cement", 2025],
				[14, 39, 14, "Alternative Fuel", 2025],
				[6, 32, 6, "Clean Energy Electricity", 2025],
				[8, 32.2, 8, "Energy Efficiencylmprovement Technology", 2025],
				[4, 36.5, 4, "CCUS", 2025],

				[33, 34.05, 33, "Low carbon cement", 2030],
				[26, 39, 26, "Alternative Fuel", 2030],
				[10, 32, 10, "Clean Energy Electricity", 2030],
				[18, 32.2, 18, "Energy Efficiencylmprovement Technology", 2030],
				[9, 36.57, 9, "CCUS", 2030],

				[78, 34.05, 78, "Low carbon cement", 2040],
				[68, 39, 68, "Alternative Fuel", 2040],
				[17, 32, 17, "Clean Energy Electricity", 2040],
				[18, 32.2, 18, "Energy Efficiencylmprovement Technology", 2040],
				[19, 36.57, 19, "CCUS", 2040],

				[118, 34.05, 118, "Low carbon cement", 2050],
				[111, 39, 111, "Alternative Fuel", 2050],
				[23, 32, 23, "Clean Energy Electricity", 2050],
				[16, 32.2, 16, "Energy Efficiencylmprovement Technology", 2050],
				[57, 36.57, 57, "CCUS", 2050],

				[118, 34.05, 118, "Low carbon cement", 2060],
				[177, 39, 117, "Alternative Fuel", 2060],
				[26, 32, 26, "Clean Energy Electricity", 2060],
				[16, 32.2, 16, "Energy Efficiencylmprovement Technology", 2060],
				[254, 36.57, 254, "CCUS", 2060],
			];
			let data = [
				["Income", "Life Expectancy", "Population", "Country", "Year"],
				[0, 34.05, 0, "Low carbon cement", 2021],
				[0, 39, 0, "Alternative Fuel", 2021],
				[0, 32, 0, "Clean Energy Electricity", 2021],
				[0, 32.2, 0, "Energy Efficiencylmprovement Technology", 2021],
				[0, 36.57, 0, "CCUS", 2021],

				[6, 34.05, 6, "Low carbon cement", 2025],
				[14, 39, 14, "Alternative Fuel", 2025],
				[6, 32, 6, "Clean Energy Electricity", 2025],
				[8, 32.2, 8, "Energy Efficiencylmprovement Technology", 2025],
				[3, 36.5, 4, "CCUS", 2025],

				[33, 34.05, 33, "Low carbon cement", 2030],
				[26, 39, 26, "Alternative Fuel", 2030],
				[10, 32, 10, "Clean Energy Electricity", 2030],
				[18, 32.2, 18, "Energy Efficiencylmprovement Technology", 2030],
				[7, 36.57, 9, "CCUS", 2030],

				[118, 34.05, 78, "Low carbon cement", 2040],
				[68, 39, 68, "Alternative Fuel", 2040],
				[17, 32, 17, "Clean Energy Electricity", 2040],
				[18, 32.2, 18, "Energy Efficiencylmprovement Technology", 2040],
				[14, 36.57, 19, "CCUS", 2040],

				[157, 34.05, 118, "Low carbon cement", 2050],
				[111, 39, 111, "Alternative Fuel", 2050],
				[23, 32, 23, "Clean Energy Electricity", 2050],
				[16, 32.2, 16, "Energy Efficiencylmprovement Technology", 2050],
				[41, 36.57, 57, "CCUS", 2050],

				[196, 34.05, 118, "Low carbon cement", 2060],
				[177, 39, 117, "Alternative Fuel", 2060],
				[26, 32, 26, "Clean Energy Electricity", 2060],
				[16, 32.2, 16, "Energy Efficiencylmprovement Technology", 2060],
				[184, 36.57, 254, "CCUS", 2060],
			];
			let startYear = years[startIndex];
			option = {
				grid: {
					top: 50,
					bottom: 30,
					left: 300,
					right: 80,
				},
				xAxis: {
					max: "dataMax",
					position: "top",
					axisLabel: {
						formatter: function (n) {
							return Math.round(n) + "";
						},
					},
				},
				dataset: {
					source: data.slice(1).filter(function (d) {
						return d[4] === startYear;
					}),
				},
				yAxis: {
					type: "category",
					inverse: true,
					max: 10,
					axisLabel: {
						show: true,
						fontSize: 14,
						rich: {
							flag: {
								fontSize: 25,
								padding: 5,
							},
						},
					},
					animationDuration: 300,
					animationDurationUpdate: 300,
				},
				series: [
					{
						realtimeSort: true,
						seriesLayoutBy: "column",
						type: "bar",
						itemStyle: {
							color: function (param) {
								return countryColors[param.value[3]] || "#5470c6";
							},
						},
						encode: {
							x: dimension,
							y: 3,
						},
						label: {
							show: true,
							precision: 1,
							position: "right",
							valueAnimation: true,
							fontFamily: "monospace",
						},
					},
				],
				animationDuration: 0,
				animationDurationUpdate: updateFrequency,
				animationEasing: "linear",
				animationEasingUpdate: "linear",
				graphic: {
					elements: [
						{
							type: "text",
							left: "center",
							bottom: 60,
							style: {
								text: startYear,
								font: "bolder 80px monospace",
								fill: "#d6000f",
							},
							z: 100,
						},
					],
				},
			};
			// myChart.setOption(option);
			for (let i = startIndex; i < years.length - 1; ++i) {
				(function (i) {
					setTimeout(function () {
						updateYear(years[i + 1]);
					}, (i - startIndex) * updateFrequency);
				})(i);
			}
			function updateYear(year) {
				let source = data.slice(1).filter(function (d) {
					return d[4] === year;
				});
				option.series[0].data = source;
				option.graphic.elements[0].style.text = year;
				myChart.setOption(option);
			}
		},
		intiLine(){
			//折线
			let countries = ["CementCO:Emissions"];
			let datasetWithFilters = [];
			let seriesList = [];
			let _rawData1 = [
				["Income", "Country", "Year"],
				[575, "CementCO:Emissions", 2021],
				[558, "CementCO:Emissions", 2025],
				[520, "CementCO:Emissions", 2030],
				[420, "CementCO:Emissions", 2040],
				[296, "CementCO:Emissions", 2050],
				[31, "CementCO:Emissions", 2060],
			];
			let _rawData = [
				["Income", "Country", "Year"],
				[575, "CementCO:Emissions", 2021],
				[559, "CementCO:Emissions", 2025],
				[523, "CementCO:Emissions", 2030],
				[386, "CementCO:Emissions", 2040],
				[272, "CementCO:Emissions", 2050],
				[23, "CementCO:Emissions", 2060],
			];
			var chartDoms = document.getElementById("mains");
			var myCharts = echarts.init(chartDoms);
			datasetWithFilters.push({
				id: "dataset_CementCO:Emissions",
				fromDatasetId: "dataset_raw",
				transform: {
					type: "filter",
					config: {
						and: [
							{ dimension: "Year", gte: 1950 },
							{ dimension: "Country", "=": "CementCO:Emissions" },
						],
					},
				},
			});
			seriesList.push({
				type: "line",
				datasetId: "dataset_CementCO:Emissions",
				showSymbol: false,
				name: "CementCO:Emissions",
				// areaStyle: {},//面性
				endLabel: {
					show: true,
					formatter: function (params) {
						return params.value[1] + ": " + params.value[0];
					},
				},
				lineStyle: {
					width: 5,
				},
				emphasis: {
					focus: "series",
				},
				color: "#000000",
				encode: {
					x: "Year",
					y: "Income",
					label: ["Country", "Income"],
					itemName: "Year",
					tooltip: ["Income"],
				},
			});
			let options = {
				animationDuration: 10000,
				dataset: [
					{
						id: "dataset_raw",
						source: _rawData,
					},
					...datasetWithFilters,
				],

				xAxis: {
					type: "category",
					nameLocation: "middle",
					axisTick: {
						show: false,
					},
					axisLine: {
						show: false,
					},
					axisLabel: {
						show: false,
					},
					splitLine: {
						show: false,
					},
				},
				yAxis: {
					type:"value",
					position: "right",
					offset:10,
					// axisLabel:{
					// 	align:"left",

					// },
					name: "",
				},
				grid: {
					top:70,
					left: 300,
				},
				series: seriesList,
			};
			myCharts.setOption(options);
		},
	
	    intiLineChart(){
			let that = this;
			let i=0;
			let years = [2021,2025,2030,2040,2050,2060];
			that.timeInterval=setInterval(function () {
				that.currentYear = years[that.currentIndex];
				if(that.currentIndex < 6){
					that.currentIndex++;
				}else{
					that.currentYear = 2060
				}
			},1500)
			let chartLineDom = document.getElementById('mainLine');
			let myLineChart = echarts.init(chartLineDom);
			const lineItems = [
				'吨水泥碳排放',
				'碳捕集',
				'清洁能源电力',
				'能效提升',
				'替代燃料',
				'低碳水泥'
			];
			let colors= ['rgb(43,140,190)', 'rgb(78,179,211)', 'rgb(123,204,196)', 'rgb(204,235,197)', 'rgb(224,243,219)', 'rgb(247,252,240)'];
			let datasetWithFilters = [],seriesList =[];
			lineItems.forEach((item,index) => {
				var datasetId = 'dataset_' + item;
				datasetWithFilters.push({
					id: datasetId,
					fromDatasetId: 'dataset_raw',
					transform: {
						type: 'filter',
						config: {
						and: [
							{ dimension: 'Year', gte: 2020 },
							{ dimension: 'Country', '=': item }
						]
						}
					}
				})
				seriesList.push({
					type: 'line',
					stack: 'Total',
					datasetId: datasetId,
					showSymbol: false,
					name: item,
					areaStyle: {
						color:colors[index]
					},
					lineStyle:{
						color:colors[index]
					},
					// endLabel: {
					// 	show: true,
					// 	formatter: function (params) {
					// 	return params.value[3] + ': ' + params.value[0];
					// 	}
					// },
					labelLayout: {
						moveOverlap: 'shiftY'
					},
					emphasis: {
						focus: 'series'
					},
					encode: {
						x: 'Year',
						y: 'Income',
						label: ['Country', 'Income'],
						itemName: 'Year',
						tooltip: ['Income']
					},
				});
			})
			let _rawData = [
				["Income", "Country", "Year"],
				[573, "吨水泥碳排放", 2021],
				[550, "吨水泥碳排放", 2025],
				[520, "吨水泥碳排放", 2030],
				[420, "吨水泥碳排放", 2040],
				[296, "吨水泥碳排放", 2050],
				[31, "吨水泥碳排放", 2060],
				[0, "碳捕集", 2021],
				[6, "碳捕集", 2025],
				[10, "碳捕集", 2030],
				[27, "碳捕集", 2040],
				[79, "碳捕集", 2050],
				[260, "碳捕集", 2060],
				[0, "清洁能源电力", 2021],
				[1, "清洁能源电力", 2025],
				[4, "清洁能源电力", 2030],
				[10, "清洁能源电力", 2040],
				[15, "清洁能源电力", 2050],
				[20, "清洁能源电力", 2060],
				[0, "能效提升", 2021],
				[6, "能效提升", 2025],
				[15, "能效提升", 2030],
				[15, "能效提升", 2040],
				[15, "能效提升", 2050],
				[15, "能效提升", 2060],
				[0, "替代燃料", 2021],
				[18, "替代燃料", 2025],
				[32, "替代燃料", 2030],
				[72, "替代燃料", 2040],
				[90, "替代燃料", 2050],
				[163, "替代燃料", 2060],
				[0, "低碳水泥", 2021],
				[5, "低碳水泥", 2025],
				[10, "低碳水泥", 2030],
				[50, "低碳水泥", 2040],
				[100, "低碳水泥", 2050],
				[105, "低碳水泥", 2060],
				];
			let lineOptions = {
				color:colors,
				animationDuration: 10000,
				legend:{
					// type: 'plain',
					icon:'rect',
					top:'95%'
					
				},
				dataset: [
					{
						id: "dataset_raw",
						source: _rawData,
					},
					...datasetWithFilters,
				],
				tooltip: {
					order: 'valueDesc',
					trigger: 'axis'
				},
				xAxis: {
					type: 'category',
					nameLocation: 'middle',
					boundaryGap: false,
				},
				yAxis: {
					max: '600', //取最大值为最大刻度
					// name: '碳排放强度（kg CO2/吨水泥）'
				},
				
				// graphic: {
				// 	elements: [
				// 		{
				// 			type: "text",
				// 			left: "center",
				// 			bottom: 60,
				// 			style: {
				// 				text: startYear,
				// 				font: "bolder 80px monospace",
				// 				fill: "#d6000f",
				// 			},
				// 			z: 100,
				// 		},
				// 	],
				// },
				series: seriesList
			}
			myLineChart.setOption(lineOptions);
			// for (let i = startIndex; i < years.length - 1; ++i) {
			// 	(function (i) {
			// 		setTimeout(function () {
			// 			updateYear(years[i + 1]);
			// 		}, (i - startIndex) * updateFrequency);
			// 	})(i);
			// }
			// function updateYear(year) {
			// 	lineOptions.graphic.elements[0].style.text = year;
			// 	myLineChart.setOption(lineOptions);
			// }
		},
	}
};
</script>
<style scoped>
.yAxisText{
	position: absolute;
	left: -78px;
	top: 295px;
	transform: rotateZ(-90deg); 
	font-size: 14px;
	color: #666666;
}
.yearText{
	position: absolute;
    left: 286px;
    bottom: 100px;
    color: red;
    width: 100px;
    height: 50px;
    z-index: 9999;
    font-size: 50px;
}
</style>
