From 8a1c7cb11ee132b3b5303f402458e1d1c406713b Mon Sep 17 00:00:00 2001
From: shijing <sj_mzw@163.com>
Date: Tue, 23 Jul 2024 09:18:36 +0800
Subject: [PATCH] =?UTF-8?q?fix:echarts=E5=8A=A8=E6=80=81=E5=A3=AE=E5=A3=AE?=
 =?UTF-8?q?=E5=9B=BE=E6=8A=98=E7=BA=BF=E5=9B=BE=E6=B5=8B=E8=AF=95demo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/wpm_gx/chart.vue | 269 +++++++++++++++++++++++++++++++++++++
 1 file changed, 269 insertions(+)
 create mode 100644 src/views/wpm_gx/chart.vue

diff --git a/src/views/wpm_gx/chart.vue b/src/views/wpm_gx/chart.vue
new file mode 100644
index 00000000..96a74621
--- /dev/null
+++ b/src/views/wpm_gx/chart.vue
@@ -0,0 +1,269 @@
+<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],
+			[4, 36.5, 4, "CCUS碳减排", 2025],
+
+			[33, 34.05, 33, "低碳水泥碳减排", 2030],
+			[26, 39, 26, "替代燃料碳减排", 2030],
+			[10, 32, 10, "清洁能源电力碳减排", 2030],
+			[18, 32.2, 18, "能效提升技术碳减排", 2030],
+			[9, 36.57, 9, "CCUS碳减排", 2030],
+
+			[78, 34.05, 78, "低碳水泥碳减排", 2040],
+			[68, 39, 68, "替代燃料碳减排", 2040],
+			[17, 32, 17, "清洁能源电力碳减排", 2040],
+			[18, 32.2, 18, "能效提升技术碳减排", 2040],
+			[19, 36.57, 19, "CCUS碳减排", 2040],
+
+			[118, 34.05, 118, "低碳水泥碳减排", 2050],
+			[111, 39, 111, "替代燃料碳减排", 2050],
+			[23, 32, 23, "清洁能源电力碳减排", 2050],
+			[16, 32.2, 16, "能效提升技术碳减排", 2050],
+			[57, 36.57, 57, "CCUS碳减排", 2050],
+
+			[118, 34.05, 118, "低碳水泥碳减排", 2060],
+			[117, 39, 117, "替代燃料碳减排", 2060],
+			[26, 32, 26, "清洁能源电力碳减排", 2060],
+			[16, 32.2, 16, "能效提升技术碳减排", 2060],
+			[254, 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],
+			[558, "水泥碳排放", 2025],
+			[520, "水泥碳排放", 2030],
+			[420, "水泥碳排放", 2040],
+			[296, "水泥碳排放", 2050],
+			[31, "水泥碳排放", 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];
+				},
+			},
+			emphasis: {
+				focus: "series",
+			},
+			color: "green",
+			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>