From 709bd6d11bcbb020d6dca8d14f4f9b16e7e328bf Mon Sep 17 00:00:00 2001 From: shijing Date: Mon, 9 Sep 2024 08:47:07 +0800 Subject: [PATCH] =?UTF-8?q?fix:=E6=B0=B4=E6=B3=A5=E9=99=A2=E5=8A=A8?= =?UTF-8?q?=E6=80=81=E5=9B=BE=E6=A0=87=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 | 191 ++++++++++++++++++++++++------------- 1 file changed, 123 insertions(+), 68 deletions(-) diff --git a/src/views/wpm_gx/chart.vue b/src/views/wpm_gx/chart.vue index fb1bdae7..8fb21761 100644 --- a/src/views/wpm_gx/chart.vue +++ b/src/views/wpm_gx/chart.vue @@ -1,16 +1,21 @@ @@ -19,15 +24,22 @@ 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 = { - 水泥碳排放: "rgb(244,192,0)", - 石膏板排放: "rgb(242,119,36)", - 建筑卫生陶瓷排放: "rgb(103,169,59)", - 玻璃排放: "rgb(77,148,211)", - 玻纤排放: "rgb(159,159,159)", - 墙体材料: "rgb(84,112,198)", + '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 = [2022, 2025, 2030, 2040, 2050, 2060]; +const years = [2021, 2025, 2030, 2040, 2050, 2060]; export default { name: "chart", data() { @@ -39,61 +51,94 @@ export default { 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"], - [12.09, 34.05, 0, "水泥碳排放", 2022], - [1.31, 39, 0, "石膏板排放", 2022], - [1.45, 32, 0, "建筑卫生陶瓷排放", 2022], - [0.36, 32.2, 0, "玻璃排放", 2022], - [0.12, 36.57, 0, "玻纤排放", 2022], - [0.25, 36.57, 0, "墙体材料", 2022], + [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], - [11.61, 34.05, 6, "水泥碳排放", 2025], - [1.06, 39, 14, "石膏板排放", 2025], - [1.16, 32, 6, "建筑卫生陶瓷排放", 2025], - [0.31, 32.2, 8, "玻璃排放", 2025], - [0.1, 36.5, 4, "玻纤排放", 2025], - [0.23, 36.57, 0, "墙体材料", 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], - [9.32, 34.05, 33, "水泥碳排放", 2030], - [0.88, 39, 26, "石膏板排放", 2030], - [0.95, 32, 10, "建筑卫生陶瓷排放", 2030], - [0.27, 32.2, 18, "玻璃排放", 2030], - [0.08, 36.57, 9, "玻纤排放", 2030], - [0.19, 36.57, 9, "墙体材料", 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], - [4.61, 34.05, 78, "水泥碳排放", 2040], - [0.63, 39, 68, "石膏板排放", 2040], - [0.68, 32, 17, "建筑卫生陶瓷排放", 2040], - [0.22, 32.2, 18, "玻璃排放", 2040], - [0.06, 36.57, 19, "玻纤排放", 2040], - [0.10, 36.57, 19, "墙体材料", 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], - [2.65, 34.05, 118, "水泥碳排放", 2050], - [0.26, 39, 111, "石膏板排放", 2050], - [0.27, 32, 23, "建筑卫生陶瓷排放", 2050], - [0.14, 32.2, 16, "玻璃排放", 2050], - [0.035, 36.57, 57, "玻纤排放", 2050], - [0.055, 36.57, 57, "墙体材料", 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], - [1.94, 34.05, 118, "水泥碳排放", 2060], - [0.04, 39, 117, "石膏板排放", 2060], - [0.0008, 32, 26, "建筑卫生陶瓷排放", 2060], - [0.09, 32.2, 16, "玻璃排放", 2060], - [0.022, 36.57, 254, "玻纤排放", 2060], - [0.034, 36.57, 254, "墙体材料", 2060], + [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: 150, + left: 300, right: 80, }, xAxis: { - max: "13", - min: "0.0008", + max: "dataMax", + // max: "13", + // min: "0.0008", position: "top", axisLabel: { // show: false, @@ -186,38 +231,47 @@ export default { myChart.setOption(option); } //折线 - let countries = ["建材行业碳排放总量"]; + 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"], - [15.6, "建材行业碳排放总量", 2022], - [14.2, "建材行业碳排放总量", 2025], - [11.1, "建材行业碳排放总量", 2030], - [5.7, "建材行业碳排放总量", 2040], - [2.4, "建材行业碳排放总量", 2050], - [0.1, "建材行业碳排放总量", 2060], + [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_建材行业碳排放总量", + id: "dataset_CementCO:Emissions", fromDatasetId: "dataset_raw", transform: { type: "filter", config: { and: [ { dimension: "Year", gte: 1950 }, - { dimension: "Country", "=": "建材行业碳排放总量" }, + { dimension: "Country", "=": "CementCO:Emissions" }, ], }, }, }); seriesList.push({ type: "line", - datasetId: "dataset_建材行业碳排放总量", + datasetId: "dataset_CementCO:Emissions", showSymbol: false, - name: "建材行业碳排放总量", + name: "CementCO:Emissions", endLabel: { show: true, formatter: function (params) { @@ -276,7 +330,8 @@ export default { name: "", }, grid: { - left: 140, + top:70, + left: 300, }, series: seriesList, };