fix:水泥院动态图标改动
This commit is contained in:
parent
1510aee343
commit
709bd6d11b
|
|
@ -1,16 +1,21 @@
|
||||||
<template>
|
<template>
|
||||||
<el-main>
|
<el-main>
|
||||||
<el-card>
|
<el-card>
|
||||||
<div id="main" style="width: 1200px; height: 500px"></div>
|
<div>
|
||||||
<div
|
<div id="title"
|
||||||
id="mains"
|
style="width: 850px;padding-left:10px; height: 50px;background-color: rgb(204,51,0);color:white;font-size: 30px;line-height: 50px">
|
||||||
style="
|
Decarbonization Roadmap of Cement Industry in China
|
||||||
width: 1200px;
|
</div>
|
||||||
height: 500px;
|
<div id="title"
|
||||||
position: absolute;
|
style="width: 850px;padding-left:10px; height: 50px;background-color: rgb(204,51,0);color:white;font-size: 30px;line-height: 50px">
|
||||||
top: 155px;
|
（when low carbon cement technology breakthroughs）
|
||||||
"
|
</div>
|
||||||
></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>
|
||||||
|
|
||||||
</el-card>
|
</el-card>
|
||||||
</el-main>
|
</el-main>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -19,15 +24,22 @@
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
const updateFrequency = 2000;
|
const updateFrequency = 2000;
|
||||||
const dimension = 0;
|
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 = {
|
const countryColors = {
|
||||||
水泥碳排放: "rgb(244,192,0)",
|
'Low carbon cement': "rgb(244,192,0)",
|
||||||
石膏板排放: "rgb(242,119,36)",
|
'Alternative Fuel': "rgb(242,119,36)",
|
||||||
建筑卫生陶瓷排放: "rgb(103,169,59)",
|
'Clean Energy Electricity': "rgb(103,169,59)",
|
||||||
玻璃排放: "rgb(77,148,211)",
|
'Energy Efficiencylmprovement Technology': "rgb(77,148,211)",
|
||||||
玻纤排放: "rgb(159,159,159)",
|
'CCUS': "rgb(159,159,159)",
|
||||||
墙体材料: "rgb(84,112,198)",
|
|
||||||
};
|
};
|
||||||
const years = [2022, 2025, 2030, 2040, 2050, 2060];
|
const years = [2021, 2025, 2030, 2040, 2050, 2060];
|
||||||
export default {
|
export default {
|
||||||
name: "chart",
|
name: "chart",
|
||||||
data() {
|
data() {
|
||||||
|
|
@ -39,61 +51,94 @@ export default {
|
||||||
var myChart = echarts.init(chartDom);
|
var myChart = echarts.init(chartDom);
|
||||||
var option;
|
var option;
|
||||||
let startIndex = 0;
|
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 = [
|
let data = [
|
||||||
["Income", "Life Expectancy", "Population", "Country", "Year"],
|
["Income", "Life Expectancy", "Population", "Country", "Year"],
|
||||||
[12.09, 34.05, 0, "水泥碳排放", 2022],
|
[0, 34.05, 0, "Low carbon cement", 2021],
|
||||||
[1.31, 39, 0, "石膏板排放", 2022],
|
[0, 39, 0, "Alternative Fuel", 2021],
|
||||||
[1.45, 32, 0, "建筑卫生陶瓷排放", 2022],
|
[0, 32, 0, "Clean Energy Electricity", 2021],
|
||||||
[0.36, 32.2, 0, "玻璃排放", 2022],
|
[0, 32.2, 0, "Energy Efficiencylmprovement Technology", 2021],
|
||||||
[0.12, 36.57, 0, "玻纤排放", 2022],
|
[0, 36.57, 0, "CCUS", 2021],
|
||||||
[0.25, 36.57, 0, "墙体材料", 2022],
|
|
||||||
|
|
||||||
[11.61, 34.05, 6, "水泥碳排放", 2025],
|
[6, 34.05, 6, "Low carbon cement", 2025],
|
||||||
[1.06, 39, 14, "石膏板排放", 2025],
|
[14, 39, 14, "Alternative Fuel", 2025],
|
||||||
[1.16, 32, 6, "建筑卫生陶瓷排放", 2025],
|
[6, 32, 6, "Clean Energy Electricity", 2025],
|
||||||
[0.31, 32.2, 8, "玻璃排放", 2025],
|
[8, 32.2, 8, "Energy Efficiencylmprovement Technology", 2025],
|
||||||
[0.1, 36.5, 4, "玻纤排放", 2025],
|
[3, 36.5, 4, "CCUS", 2025],
|
||||||
[0.23, 36.57, 0, "墙体材料", 2025],
|
|
||||||
|
|
||||||
[9.32, 34.05, 33, "水泥碳排放", 2030],
|
[33, 34.05, 33, "Low carbon cement", 2030],
|
||||||
[0.88, 39, 26, "石膏板排放", 2030],
|
[26, 39, 26, "Alternative Fuel", 2030],
|
||||||
[0.95, 32, 10, "建筑卫生陶瓷排放", 2030],
|
[10, 32, 10, "Clean Energy Electricity", 2030],
|
||||||
[0.27, 32.2, 18, "玻璃排放", 2030],
|
[18, 32.2, 18, "Energy Efficiencylmprovement Technology", 2030],
|
||||||
[0.08, 36.57, 9, "玻纤排放", 2030],
|
[7, 36.57, 9, "CCUS", 2030],
|
||||||
[0.19, 36.57, 9, "墙体材料", 2030],
|
|
||||||
|
|
||||||
[4.61, 34.05, 78, "水泥碳排放", 2040],
|
[118, 34.05, 78, "Low carbon cement", 2040],
|
||||||
[0.63, 39, 68, "石膏板排放", 2040],
|
[68, 39, 68, "Alternative Fuel", 2040],
|
||||||
[0.68, 32, 17, "建筑卫生陶瓷排放", 2040],
|
[17, 32, 17, "Clean Energy Electricity", 2040],
|
||||||
[0.22, 32.2, 18, "玻璃排放", 2040],
|
[18, 32.2, 18, "Energy Efficiencylmprovement Technology", 2040],
|
||||||
[0.06, 36.57, 19, "玻纤排放", 2040],
|
[14, 36.57, 19, "CCUS", 2040],
|
||||||
[0.10, 36.57, 19, "墙体材料", 2040],
|
|
||||||
|
|
||||||
[2.65, 34.05, 118, "水泥碳排放", 2050],
|
[157, 34.05, 118, "Low carbon cement", 2050],
|
||||||
[0.26, 39, 111, "石膏板排放", 2050],
|
[111, 39, 111, "Alternative Fuel", 2050],
|
||||||
[0.27, 32, 23, "建筑卫生陶瓷排放", 2050],
|
[23, 32, 23, "Clean Energy Electricity", 2050],
|
||||||
[0.14, 32.2, 16, "玻璃排放", 2050],
|
[16, 32.2, 16, "Energy Efficiencylmprovement Technology", 2050],
|
||||||
[0.035, 36.57, 57, "玻纤排放", 2050],
|
[41, 36.57, 57, "CCUS", 2050],
|
||||||
[0.055, 36.57, 57, "墙体材料", 2050],
|
|
||||||
|
|
||||||
[1.94, 34.05, 118, "水泥碳排放", 2060],
|
[196, 34.05, 118, "Low carbon cement", 2060],
|
||||||
[0.04, 39, 117, "石膏板排放", 2060],
|
[177, 39, 117, "Alternative Fuel", 2060],
|
||||||
[0.0008, 32, 26, "建筑卫生陶瓷排放", 2060],
|
[26, 32, 26, "Clean Energy Electricity", 2060],
|
||||||
[0.09, 32.2, 16, "玻璃排放", 2060],
|
[16, 32.2, 16, "Energy Efficiencylmprovement Technology", 2060],
|
||||||
[0.022, 36.57, 254, "玻纤排放", 2060],
|
[184, 36.57, 254, "CCUS", 2060],
|
||||||
[0.034, 36.57, 254, "墙体材料", 2060],
|
|
||||||
];
|
];
|
||||||
let startYear = years[startIndex];
|
let startYear = years[startIndex];
|
||||||
option = {
|
option = {
|
||||||
grid: {
|
grid: {
|
||||||
top: 50,
|
top: 50,
|
||||||
bottom: 30,
|
bottom: 30,
|
||||||
left: 150,
|
left: 300,
|
||||||
right: 80,
|
right: 80,
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
max: "13",
|
max: "dataMax",
|
||||||
min: "0.0008",
|
// max: "13",
|
||||||
|
// min: "0.0008",
|
||||||
position: "top",
|
position: "top",
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
// show: false,
|
// show: false,
|
||||||
|
|
@ -186,38 +231,47 @@ export default {
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
}
|
}
|
||||||
//折线
|
//折线
|
||||||
let countries = ["建材行业碳排放总量"];
|
let countries = ["CementCO:Emissions"];
|
||||||
let datasetWithFilters = [];
|
let datasetWithFilters = [];
|
||||||
let seriesList = [];
|
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 = [
|
let _rawData = [
|
||||||
["Income", "Country", "Year"],
|
["Income", "Country", "Year"],
|
||||||
[15.6, "建材行业碳排放总量", 2022],
|
[575, "CementCO:Emissions", 2021],
|
||||||
[14.2, "建材行业碳排放总量", 2025],
|
[559, "CementCO:Emissions", 2025],
|
||||||
[11.1, "建材行业碳排放总量", 2030],
|
[523, "CementCO:Emissions", 2030],
|
||||||
[5.7, "建材行业碳排放总量", 2040],
|
[386, "CementCO:Emissions", 2040],
|
||||||
[2.4, "建材行业碳排放总量", 2050],
|
[272, "CementCO:Emissions", 2050],
|
||||||
[0.1, "建材行业碳排放总量", 2060],
|
[23, "CementCO:Emissions", 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_CementCO:Emissions",
|
||||||
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", "=": "CementCO:Emissions" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
seriesList.push({
|
seriesList.push({
|
||||||
type: "line",
|
type: "line",
|
||||||
datasetId: "dataset_建材行业碳排放总量",
|
datasetId: "dataset_CementCO:Emissions",
|
||||||
showSymbol: false,
|
showSymbol: false,
|
||||||
name: "建材行业碳排放总量",
|
name: "CementCO:Emissions",
|
||||||
endLabel: {
|
endLabel: {
|
||||||
show: true,
|
show: true,
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
|
|
@ -276,7 +330,8 @@ export default {
|
||||||
name: "",
|
name: "",
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
left: 140,
|
top:70,
|
||||||
|
left: 300,
|
||||||
},
|
},
|
||||||
series: seriesList,
|
series: seriesList,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue