<template>
	<el-main>
		<el-card>
			<div id="main" style="width: 1000px; height: 600px"></div>
			<div
				id="mains"
				style="
					width: 1000px;
					height: 600px;
					position: absolute;
					top: 185px;
				"
			></div>
		</el-card>
	</el-main>
</template>

<script>
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)",
	CCUS碳减排: "rgb(159,159,159)",
};
const years = [2021, 2025, 2030, 2040, 2050, 2060];
export default {
	name: "chart",
	data() {
		return {};
	},
	mounted() {
		//柱状
		var chartDom = document.getElementById("main");
		var myChart = echarts.init(chartDom);
		var option;
		let startIndex = 0;
		let data = [
			["Income", "Life Expectancy", "Population", "Country", "Year"],
			[0, 34.05, 0, "低碳水泥碳减排", 2021],
			[0, 39, 0, "替代燃料碳减排", 2021],
			[0, 32, 0, "清洁能源电力碳减排", 2021],
			[0, 32.2, 0, "能效提升技术碳减排", 2021],
			[0, 36.57, 0, "CCUS碳减排", 2021],

			[6, 34.05, 6, "低碳水泥碳减排", 2025],
			[14, 39, 14, "替代燃料碳减排", 2025],
			[6, 32, 6, "清洁能源电力碳减排", 2025],
			[8, 32.2, 8, "能效提升技术碳减排", 2025],
			[3, 36.5, 4, "CCUS碳减排", 2025],

			[33, 34.05, 33, "低碳水泥碳减排", 2030],
			[16, 39, 26, "替代燃料碳减排", 2030],
			[10, 32, 10, "清洁能源电力碳减排", 2030],
			[18, 32.2, 18, "能效提升技术碳减排", 2030],
			[7, 36.57, 9, "CCUS碳减排", 2030],

			[118, 34.05, 78, "低碳水泥碳减排", 2040],
			[68, 39, 68, "替代燃料碳减排", 2040],
			[17, 32, 17, "清洁能源电力碳减排", 2040],
			[18, 32.2, 18, "能效提升技术碳减排", 2040],
			[14, 36.57, 19, "CCUS碳减排", 2040],

			[157, 34.05, 118, "低碳水泥碳减排", 2050],
			[111, 39, 111, "替代燃料碳减排", 2050],
			[23, 32, 23, "清洁能源电力碳减排", 2050],
			[16, 32.2, 16, "能效提升技术碳减排", 2050],
			[41, 36.57, 57, "CCUS碳减排", 2050],

			[196, 34.05, 118, "低碳水泥碳减排", 2060],
			[177, 39, 117, "替代燃料碳减排", 2060],
			[26, 32, 26, "清洁能源电力碳减排", 2060],
			[16, 32.2, 16, "能效提升技术碳减排", 2060],
			[184, 36.57, 254, "CCUS碳减排", 2060],
		];
		let startYear = years[startIndex];
		option = {
			grid: {
				top: 50,
				bottom: 30,
				left: 150,
				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,
					// formatter: function (value) {
					// },
					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",
						right: 160,
						bottom: 60,
						style: {
							text: startYear,
							font: "bolder 80px monospace",
							fill: "rgba(100, 100, 100, 0.25)",
						},
						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);
		}
		//折线
		let countries = ["水泥碳排放"];
		let datasetWithFilters = [];
		let seriesList = [];
		let _rawData = [
			["Income", "Country", "Year"],
			[575, "水泥碳排放", 2021],
			[559, "水泥碳排放", 2025],
			[523, "水泥碳排放", 2030],
			[386, "水泥碳排放", 2040],
			[273, "水泥碳排放", 2050],
			[23, "水泥碳排放", 2060],
		];
		var chartDoms = document.getElementById("mains");
		var myCharts = echarts.init(chartDoms);
		datasetWithFilters.push({
			id: "dataset_水泥碳排放",
			fromDatasetId: "dataset_raw",
			transform: {
				type: "filter",
				config: {
					and: [
						{ dimension: "Year", gte: 1950 },
						{ dimension: "Country", "=": "水泥碳排放" },
					],
				},
			},
		});
		seriesList.push({
			type: "line",
			datasetId: "dataset_水泥碳排放",
			showSymbol: false,
			name: "水泥碳排放",
			endLabel: {
				show: true,
				formatter: function (params) {
					return params.value[1] + ": " + params.value[0];
				},
			},
			lineStyle: {
				width: 5,
			},
			emphasis: {
				focus: "series",
			},
			// color: "#43fb43",//绿色
			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",
				// show: false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
				axisTick: {
					show: false, // 不显示坐标轴刻度线
				},
				axisLine: {
					show: false, // 不显示坐标轴线
				},
				axisLabel: {
					show: false, // 不显示坐标轴上的文字
				},
				splitLine: {
					show: false, // 不显示网格线
				},
			},
			yAxis: {
				position: "right",
				name: "",
			},
			grid: {
				left: 140,
			},
			series: seriesList,
		};
		myCharts.setOption(options);
	},
};
</script>
