From 38c84fa1e986b389e9a046c8ea42bebe162c6fc3 Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Tue, 19 Nov 2024 16:31:18 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E9=AB=98echarts=E6=94=B9=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/wpm_gx/chart.vue | 752 ++++++++++++++++++++++++-------------
 1 file changed, 482 insertions(+), 270 deletions(-)

diff --git a/src/views/wpm_gx/chart.vue b/src/views/wpm_gx/chart.vue
index 8fb21761..bccc45fd 100644
--- a/src/views/wpm_gx/chart.vue
+++ b/src/views/wpm_gx/chart.vue
@@ -10,17 +10,28 @@
 				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>
-				<!-- 折线图 155 / 205-->
-				<div id="mains" style="width: 1200px;height: 600px;position: absolute;top: 205px;"></div>
-			</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;
@@ -43,299 +54,500 @@ const years = [2021, 2025, 2030, 2040, 2050, 2060];
 export default {
 	name: "chart",
 	data() {
-		return {};
+		return {
+			timeInterval:null,
+			currentYear: 2021,
+			currentIndex: 0,
+		};
 	},
 	mounted() {
-		//柱状
-		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],
+		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],
+				[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],
+				[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],
+				[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", 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],
+				[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],
+				[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],
+				[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],
+				[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],
+				[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",
-				// max: "13",
-				// min: "0.0008",
-				position: "top",
-				axisLabel: {
-					// show: false,
-					formatter: function (n) {
-						return Math.round(n) + "";
-					},
+				[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,
 				},
-			},
-			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,
+				xAxis: {
+					max: "dataMax",
+					position: "top",
+					axisLabel: {
+						formatter: function (n) {
+							return Math.round(n) + "";
 						},
 					},
 				},
-				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: {
+				dataset: {
+					source: data.slice(1).filter(function (d) {
+						return d[4] === startYear;
+					}),
+				},
+				yAxis: {
+					type: "category",
+					inverse: true,
+					max: 10,
+					axisLabel: {
 						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",
+						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",
 						},
-						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 = ["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" },
+				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,
+						},
 					],
 				},
-			},
-		});
-		seriesList.push({
-			type: "line",
-			datasetId: "dataset_CementCO:Emissions",
-			showSymbol: false,
-			name: "CementCO:Emissions",
-			endLabel: {
-				show: true,
-				formatter: function (params) {
-					return params.value[1] + ": " + params.value[0];
+			};
+			// 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" },
+						],
+					},
 				},
-			},
-			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,
+			});
+			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];
+					},
 				},
-				...datasetWithFilters,
-			],
+				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,
+				xAxis: {
+					type: "category",
+					nameLocation: "middle",
+					axisTick: {
+						show: false,
+					},
+					axisLine: {
+						show: false,
+					},
+					axisLabel: {
+						show: false,
+					},
+					splitLine: {
+						show: false,
+					},
 				},
-				axisLine: {
-					show: false,
-				},
-				axisLabel: {
-					show: false,
-				},
-				splitLine: {
-					show: false,
-				},
-			},
-			yAxis: {
-				type:"value",
-				position: "right",
-				offset:10,
-				// axisLabel:{
-				// 	align:"left",
+				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,
+				// 		},
+				// 	],
 				// },
-				name: "",
-			},
-			grid: {
-				top:70,
-				left: 300,
-			},
-			series: seriesList,
-		};
-		myCharts.setOption(options);
-	},
+				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>