fix:碳排放图表数据展示

This commit is contained in:
shijing 2024-08-20 09:16:54 +08:00
parent 8a8c8322a5
commit 8f3ef47bb1
1 changed files with 66 additions and 51 deletions

View File

@ -1,14 +1,14 @@
<template> <template>
<el-main> <el-main>
<el-card> <el-card>
<div id="main" style="width: 1000px; height: 500px"></div> <div id="main" style="width: 1200px; height: 500px"></div>
<div <div
id="mains" id="mains"
style=" style="
width: 1000px; width: 1200px;
height: 500px; height: 500px;
position: absolute; position: absolute;
top: 185px; top: 155px;
" "
></div> ></div>
</el-card> </el-card>
@ -20,13 +20,14 @@ import * as echarts from "echarts";
const updateFrequency = 2000; const updateFrequency = 2000;
const dimension = 0; const dimension = 0;
const countryColors = { const countryColors = {
低碳水泥碳减排: "rgb(244,192,0)", 水泥碳排放: "rgb(244,192,0)",
替代燃料碳减排: "rgb(242,119,36)", 石膏板排放: "rgb(242,119,36)",
清洁能源电力碳减排: "rgb(103,169,59)", 建筑卫生陶瓷排放: "rgb(103,169,59)",
能效提升技术碳减排: "rgb(77,148,211)", 玻璃排放: "rgb(77,148,211)",
CCUS碳减排: "rgb(159,159,159)", 玻纤排放: "rgb(159,159,159)",
墙体材料: "rgb(84,112,198)",
}; };
const years = [2021, 2025, 2030, 2040, 2050, 2060]; const years = [2022, 2025, 2030, 2040, 2050, 2060];
export default { export default {
name: "chart", name: "chart",
data() { data() {
@ -40,41 +41,47 @@ export default {
let startIndex = 0; let startIndex = 0;
let data = [ let data = [
["Income", "Life Expectancy", "Population", "Country", "Year"], ["Income", "Life Expectancy", "Population", "Country", "Year"],
[0, 34.05, 0, "低碳水泥碳减排", 2021], [12.09, 34.05, 0, "水泥碳排放", 2022],
[0, 39, 0, "替代燃料碳减排", 2021], [1.31, 39, 0, "石膏板排放", 2022],
[0, 32, 0, "清洁能源电力碳减排", 2021], [1.45, 32, 0, "建筑卫生陶瓷排放", 2022],
[0, 32.2, 0, "能效提升技术碳减排", 2021], [0.36, 32.2, 0, "玻璃排放", 2022],
[0, 36.57, 0, "CCUS碳减排", 2021], [0.12, 36.57, 0, "玻纤排放", 2022],
[0.25, 36.57, 0, "墙体材料", 2022],
[6, 34.05, 6, "低碳水泥碳减排", 2025], [11.61, 34.05, 6, "水泥碳排放", 2025],
[14, 39, 14, "替代燃料碳减排", 2025], [1.06, 39, 14, "石膏板排放", 2025],
[6, 32, 6, "清洁能源电力碳减排", 2025], [1.16, 32, 6, "建筑卫生陶瓷排放", 2025],
[8, 32.2, 8, "能效提升技术碳减排", 2025], [0.31, 32.2, 8, "玻璃排放", 2025],
[3, 36.5, 4, "CCUS碳减排", 2025], [0.1, 36.5, 4, "玻纤排放", 2025],
[0.23, 36.57, 0, "墙体材料", 2025],
[33, 34.05, 33, "低碳水泥碳减排", 2030], [9.32, 34.05, 33, "水泥碳排放", 2030],
[26, 39, 26, "替代燃料碳减排", 2030], [0.88, 39, 26, "石膏板排放", 2030],
[10, 32, 10, "清洁能源电力碳减排", 2030], [0.95, 32, 10, "建筑卫生陶瓷排放", 2030],
[18, 32.2, 18, "能效提升技术碳减排", 2030], [0.27, 32.2, 18, "玻璃排放", 2030],
[7, 36.57, 9, "CCUS碳减排", 2030], [0.08, 36.57, 9, "玻纤排放", 2030],
[0.19, 36.57, 9, "墙体材料", 2030],
[118, 34.05, 78, "低碳水泥碳减排", 2040], [4.61, 34.05, 78, "水泥碳排放", 2040],
[68, 39, 68, "替代燃料碳减排", 2040], [0.63, 39, 68, "石膏板排放", 2040],
[17, 32, 17, "清洁能源电力碳减排", 2040], [0.68, 32, 17, "建筑卫生陶瓷排放", 2040],
[18, 32.2, 18, "能效提升技术碳减排", 2040], [0.22, 32.2, 18, "玻璃排放", 2040],
[14, 36.57, 19, "CCUS碳减排", 2040], [0.06, 36.57, 19, "玻纤排放", 2040],
[0.10, 36.57, 19, "墙体材料", 2040],
[157, 34.05, 118, "低碳水泥碳减排", 2050], [2.65, 34.05, 118, "水泥碳排放", 2050],
[111, 39, 111, "替代燃料碳减排", 2050], [0.26, 39, 111, "石膏板排放", 2050],
[23, 32, 23, "清洁能源电力碳减排", 2050], [0.27, 32, 23, "建筑卫生陶瓷排放", 2050],
[16, 32.2, 16, "能效提升技术碳减排", 2050], [0.14, 32.2, 16, "玻璃排放", 2050],
[41, 36.57, 57, "CCUS碳减排", 2050], [0.035, 36.57, 57, "玻纤排放", 2050],
[0.055, 36.57, 57, "墙体材料", 2050],
[196, 34.05, 118, "低碳水泥碳减排", 2060], [1.94, 34.05, 118, "水泥碳排放", 2060],
[177, 39, 117, "替代燃料碳减排", 2060], [0.04, 39, 117, "石膏板排放", 2060],
[26, 32, 26, "清洁能源电力碳减排", 2060], [0.0008, 32, 26, "建筑卫生陶瓷排放", 2060],
[16, 32.2, 16, "能效提升技术碳减排", 2060], [0.09, 32.2, 16, "玻璃排放", 2060],
[184, 36.57, 254, "CCUS碳减排", 2060], [0.022, 36.57, 254, "玻纤排放", 2060],
[0.034, 36.57, 254, "墙体材料", 2060],
]; ];
let startYear = years[startIndex]; let startYear = years[startIndex];
option = { option = {
@ -85,9 +92,11 @@ export default {
right: 80, right: 80,
}, },
xAxis: { xAxis: {
max: "dataMax", max: "13",
min: "0.0008",
position: "top", position: "top",
axisLabel: { axisLabel: {
// show: false,
formatter: function (n) { formatter: function (n) {
return Math.round(n) + ""; return Math.round(n) + "";
}, },
@ -177,38 +186,38 @@ export default {
myChart.setOption(option); myChart.setOption(option);
} }
//线 //线
let countries = ["水泥碳排放"]; let countries = ["建材行业碳排放总量"];
let datasetWithFilters = []; let datasetWithFilters = [];
let seriesList = []; let seriesList = [];
let _rawData = [ let _rawData = [
["Income", "Country", "Year"], ["Income", "Country", "Year"],
[575, "水泥碳排放", 2021], [15.6, "建材行业碳排放总量", 2022],
[559, "水泥碳排放", 2025], [14.2, "建材行业碳排放总量", 2025],
[523, "水泥碳排放", 2030], [11.1, "建材行业碳排放总量", 2030],
[386, "水泥碳排放", 2040], [5.7, "建材行业碳排放总量", 2040],
[273, "水泥碳排放", 2050], [2.4, "建材行业碳排放总量", 2050],
[23, "水泥碳排放", 2060], [0.1, "建材行业碳排放总量", 2060],
]; ];
var chartDoms = document.getElementById("mains"); var chartDoms = document.getElementById("mains");
var myCharts = echarts.init(chartDoms); var myCharts = echarts.init(chartDoms);
datasetWithFilters.push({ datasetWithFilters.push({
id: "dataset_水泥碳排放", id: "dataset_建材行业碳排放总量",
fromDatasetId: "dataset_raw", fromDatasetId: "dataset_raw",
transform: { transform: {
type: "filter", type: "filter",
config: { config: {
and: [ and: [
{ dimension: "Year", gte: 1950 }, { dimension: "Year", gte: 1950 },
{ dimension: "Country", "=": "水泥碳排放" }, { dimension: "Country", "=": "建材行业碳排放总量" },
], ],
}, },
}, },
}); });
seriesList.push({ seriesList.push({
type: "line", type: "line",
datasetId: "dataset_水泥碳排放", datasetId: "dataset_建材行业碳排放总量",
showSymbol: false, showSymbol: false,
name: "水泥碳排放", name: "建材行业碳排放总量",
endLabel: { endLabel: {
show: true, show: true,
formatter: function (params) { formatter: function (params) {
@ -257,7 +266,13 @@ export default {
}, },
}, },
yAxis: { yAxis: {
type:"value",
position: "right", position: "right",
offset:10,
// axisLabel:{
// align:"left",
// },
name: "", name: "",
}, },
grid: { grid: {