fix:高echarts改动
This commit is contained in:
parent
231b306829
commit
38c84fa1e9
|
|
@ -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">
|
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）
|
（when low carbon cement technology breakthroughs）
|
||||||
</div>
|
</div>
|
||||||
<!-- 柱状图 -->
|
|
||||||
<div id="main" style="width: 1200px; height: 600px;border: 4px solid rgb(204,51,0)"></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-card>
|
||||||
</el-main>
|
</el-main>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { stack } from "d3";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
const updateFrequency = 2000;
|
const updateFrequency = 2000;
|
||||||
const dimension = 0;
|
const dimension = 0;
|
||||||
|
|
@ -43,299 +54,500 @@ const years = [2021, 2025, 2030, 2040, 2050, 2060];
|
||||||
export default {
|
export default {
|
||||||
name: "chart",
|
name: "chart",
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
timeInterval:null,
|
||||||
|
currentYear: 2021,
|
||||||
|
currentIndex: 0,
|
||||||
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
//柱状
|
this.intiLineChart();
|
||||||
var chartDom = document.getElementById("main");
|
this.intiLine();
|
||||||
var myChart = echarts.init(chartDom);
|
this.intiBar();
|
||||||
var option;
|
},
|
||||||
let startIndex = 0;
|
methods: {
|
||||||
let data1 = [
|
intiBar(){
|
||||||
["Income", "Life Expectancy", "Population", "Country", "Year"],
|
//柱状
|
||||||
[0, 34.05, 0, "Low carbon cement", 2021],
|
var chartDom = document.getElementById("main");
|
||||||
[0, 39, 0, "Alternative Fuel", 2021],
|
var myChart = echarts.init(chartDom);
|
||||||
[0, 32, 0, "Clean Energy Electricity", 2021],
|
var option;
|
||||||
[0, 32.2, 0, "Energy Efficiencylmprovement Technology", 2021],
|
let startIndex = 0;
|
||||||
[0, 36.57, 0, "CCUS", 2021],
|
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],
|
[6, 34.05, 6, "Low carbon cement", 2025],
|
||||||
[14, 39, 14, "Alternative Fuel", 2025],
|
[14, 39, 14, "Alternative Fuel", 2025],
|
||||||
[6, 32, 6, "Clean Energy Electricity", 2025],
|
[6, 32, 6, "Clean Energy Electricity", 2025],
|
||||||
[8, 32.2, 8, "Energy Efficiencylmprovement Technology", 2025],
|
[8, 32.2, 8, "Energy Efficiencylmprovement Technology", 2025],
|
||||||
[4, 36.5, 4, "CCUS", 2025],
|
[4, 36.5, 4, "CCUS", 2025],
|
||||||
|
|
||||||
[33, 34.05, 33, "Low carbon cement", 2030],
|
[33, 34.05, 33, "Low carbon cement", 2030],
|
||||||
[26, 39, 26, "Alternative Fuel", 2030],
|
[26, 39, 26, "Alternative Fuel", 2030],
|
||||||
[10, 32, 10, "Clean Energy Electricity", 2030],
|
[10, 32, 10, "Clean Energy Electricity", 2030],
|
||||||
[18, 32.2, 18, "Energy Efficiencylmprovement Technology", 2030],
|
[18, 32.2, 18, "Energy Efficiencylmprovement Technology", 2030],
|
||||||
[9, 36.57, 9, "CCUS", 2030],
|
[9, 36.57, 9, "CCUS", 2030],
|
||||||
|
|
||||||
[78, 34.05, 78, "Low carbon cement", 2040],
|
[78, 34.05, 78, "Low carbon cement", 2040],
|
||||||
[68, 39, 68, "Alternative Fuel", 2040],
|
[68, 39, 68, "Alternative Fuel", 2040],
|
||||||
[17, 32, 17, "Clean Energy Electricity", 2040],
|
[17, 32, 17, "Clean Energy Electricity", 2040],
|
||||||
[18, 32.2, 18, "Energy Efficiencylmprovement Technology", 2040],
|
[18, 32.2, 18, "Energy Efficiencylmprovement Technology", 2040],
|
||||||
[19, 36.57, 19, "CCUS", 2040],
|
[19, 36.57, 19, "CCUS", 2040],
|
||||||
|
|
||||||
[118, 34.05, 118, "Low carbon cement", 2050],
|
[118, 34.05, 118, "Low carbon cement", 2050],
|
||||||
[111, 39, 111, "Alternative Fuel", 2050],
|
[111, 39, 111, "Alternative Fuel", 2050],
|
||||||
[23, 32, 23, "Clean Energy Electricity", 2050],
|
[23, 32, 23, "Clean Energy Electricity", 2050],
|
||||||
[16, 32.2, 16, "Energy Efficiencylmprovement Technology", 2050],
|
[16, 32.2, 16, "Energy Efficiencylmprovement Technology", 2050],
|
||||||
[57, 36.57, 57, "CCUS", 2050],
|
[57, 36.57, 57, "CCUS", 2050],
|
||||||
|
|
||||||
[118, 34.05, 118, "Low carbon cement", 2060],
|
[118, 34.05, 118, "Low carbon cement", 2060],
|
||||||
[177, 39, 117, "Alternative Fuel", 2060],
|
[177, 39, 117, "Alternative Fuel", 2060],
|
||||||
[26, 32, 26, "Clean Energy Electricity", 2060],
|
[26, 32, 26, "Clean Energy Electricity", 2060],
|
||||||
[16, 32.2, 16, "Energy Efficiencylmprovement Technology", 2060],
|
[16, 32.2, 16, "Energy Efficiencylmprovement Technology", 2060],
|
||||||
[254, 36.57, 254, "CCUS", 2060],
|
[254, 36.57, 254, "CCUS", 2060],
|
||||||
];
|
];
|
||||||
let data = [
|
let data = [
|
||||||
["Income", "Life Expectancy", "Population", "Country", "Year"],
|
["Income", "Life Expectancy", "Population", "Country", "Year"],
|
||||||
[0, 34.05, 0, "Low carbon cement", 2021],
|
[0, 34.05, 0, "Low carbon cement", 2021],
|
||||||
[0, 39, 0, "Alternative Fuel", 2021],
|
[0, 39, 0, "Alternative Fuel", 2021],
|
||||||
[0, 32, 0, "Clean Energy Electricity", 2021],
|
[0, 32, 0, "Clean Energy Electricity", 2021],
|
||||||
[0, 32.2, 0, "Energy Efficiencylmprovement Technology", 2021],
|
[0, 32.2, 0, "Energy Efficiencylmprovement Technology", 2021],
|
||||||
[0, 36.57, 0, "CCUS", 2021],
|
[0, 36.57, 0, "CCUS", 2021],
|
||||||
|
|
||||||
[6, 34.05, 6, "Low carbon cement", 2025],
|
[6, 34.05, 6, "Low carbon cement", 2025],
|
||||||
[14, 39, 14, "Alternative Fuel", 2025],
|
[14, 39, 14, "Alternative Fuel", 2025],
|
||||||
[6, 32, 6, "Clean Energy Electricity", 2025],
|
[6, 32, 6, "Clean Energy Electricity", 2025],
|
||||||
[8, 32.2, 8, "Energy Efficiencylmprovement Technology", 2025],
|
[8, 32.2, 8, "Energy Efficiencylmprovement Technology", 2025],
|
||||||
[3, 36.5, 4, "CCUS", 2025],
|
[3, 36.5, 4, "CCUS", 2025],
|
||||||
|
|
||||||
[33, 34.05, 33, "Low carbon cement", 2030],
|
[33, 34.05, 33, "Low carbon cement", 2030],
|
||||||
[26, 39, 26, "Alternative Fuel", 2030],
|
[26, 39, 26, "Alternative Fuel", 2030],
|
||||||
[10, 32, 10, "Clean Energy Electricity", 2030],
|
[10, 32, 10, "Clean Energy Electricity", 2030],
|
||||||
[18, 32.2, 18, "Energy Efficiencylmprovement Technology", 2030],
|
[18, 32.2, 18, "Energy Efficiencylmprovement Technology", 2030],
|
||||||
[7, 36.57, 9, "CCUS", 2030],
|
[7, 36.57, 9, "CCUS", 2030],
|
||||||
|
|
||||||
[118, 34.05, 78, "Low carbon cement", 2040],
|
[118, 34.05, 78, "Low carbon cement", 2040],
|
||||||
[68, 39, 68, "Alternative Fuel", 2040],
|
[68, 39, 68, "Alternative Fuel", 2040],
|
||||||
[17, 32, 17, "Clean Energy Electricity", 2040],
|
[17, 32, 17, "Clean Energy Electricity", 2040],
|
||||||
[18, 32.2, 18, "Energy Efficiencylmprovement Technology", 2040],
|
[18, 32.2, 18, "Energy Efficiencylmprovement Technology", 2040],
|
||||||
[14, 36.57, 19, "CCUS", 2040],
|
[14, 36.57, 19, "CCUS", 2040],
|
||||||
|
|
||||||
[157, 34.05, 118, "Low carbon cement", 2050],
|
[157, 34.05, 118, "Low carbon cement", 2050],
|
||||||
[111, 39, 111, "Alternative Fuel", 2050],
|
[111, 39, 111, "Alternative Fuel", 2050],
|
||||||
[23, 32, 23, "Clean Energy Electricity", 2050],
|
[23, 32, 23, "Clean Energy Electricity", 2050],
|
||||||
[16, 32.2, 16, "Energy Efficiencylmprovement Technology", 2050],
|
[16, 32.2, 16, "Energy Efficiencylmprovement Technology", 2050],
|
||||||
[41, 36.57, 57, "CCUS", 2050],
|
[41, 36.57, 57, "CCUS", 2050],
|
||||||
|
|
||||||
[196, 34.05, 118, "Low carbon cement", 2060],
|
[196, 34.05, 118, "Low carbon cement", 2060],
|
||||||
[177, 39, 117, "Alternative Fuel", 2060],
|
[177, 39, 117, "Alternative Fuel", 2060],
|
||||||
[26, 32, 26, "Clean Energy Electricity", 2060],
|
[26, 32, 26, "Clean Energy Electricity", 2060],
|
||||||
[16, 32.2, 16, "Energy Efficiencylmprovement Technology", 2060],
|
[16, 32.2, 16, "Energy Efficiencylmprovement Technology", 2060],
|
||||||
[184, 36.57, 254, "CCUS", 2060],
|
[184, 36.57, 254, "CCUS", 2060],
|
||||||
];
|
];
|
||||||
let startYear = years[startIndex];
|
let startYear = years[startIndex];
|
||||||
option = {
|
option = {
|
||||||
grid: {
|
grid: {
|
||||||
top: 50,
|
top: 50,
|
||||||
bottom: 30,
|
bottom: 30,
|
||||||
left: 300,
|
left: 300,
|
||||||
right: 80,
|
right: 80,
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
max: "dataMax",
|
|
||||||
// max: "13",
|
|
||||||
// min: "0.0008",
|
|
||||||
position: "top",
|
|
||||||
axisLabel: {
|
|
||||||
// show: false,
|
|
||||||
formatter: function (n) {
|
|
||||||
return Math.round(n) + "";
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
xAxis: {
|
||||||
dataset: {
|
max: "dataMax",
|
||||||
source: data.slice(1).filter(function (d) {
|
position: "top",
|
||||||
return d[4] === startYear;
|
axisLabel: {
|
||||||
}),
|
formatter: function (n) {
|
||||||
},
|
return Math.round(n) + "";
|
||||||
yAxis: {
|
|
||||||
type: "category",
|
|
||||||
inverse: true,
|
|
||||||
max: 10,
|
|
||||||
axisLabel: {
|
|
||||||
show: true,
|
|
||||||
fontSize: 14,
|
|
||||||
// formatter: function (value) {
|
|
||||||
// },
|
|
||||||
rich: {
|
|
||||||
flag: {
|
|
||||||
fontSize: 25,
|
|
||||||
padding: 5,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
animationDuration: 300,
|
dataset: {
|
||||||
animationDurationUpdate: 300,
|
source: data.slice(1).filter(function (d) {
|
||||||
},
|
return d[4] === startYear;
|
||||||
series: [
|
}),
|
||||||
{
|
},
|
||||||
realtimeSort: true,
|
yAxis: {
|
||||||
seriesLayoutBy: "column",
|
type: "category",
|
||||||
type: "bar",
|
inverse: true,
|
||||||
itemStyle: {
|
max: 10,
|
||||||
color: function (param) {
|
axisLabel: {
|
||||||
return countryColors[param.value[3]] || "#5470c6";
|
|
||||||
},
|
|
||||||
},
|
|
||||||
encode: {
|
|
||||||
x: dimension,
|
|
||||||
y: 3,
|
|
||||||
},
|
|
||||||
label: {
|
|
||||||
show: true,
|
show: true,
|
||||||
precision: 1,
|
fontSize: 14,
|
||||||
position: "right",
|
rich: {
|
||||||
valueAnimation: true,
|
flag: {
|
||||||
fontFamily: "monospace",
|
fontSize: 25,
|
||||||
},
|
padding: 5,
|
||||||
},
|
},
|
||||||
],
|
},
|
||||||
animationDuration: 0,
|
},
|
||||||
animationDurationUpdate: updateFrequency,
|
animationDuration: 300,
|
||||||
animationEasing: "linear",
|
animationDurationUpdate: 300,
|
||||||
animationEasingUpdate: "linear",
|
},
|
||||||
graphic: {
|
series: [
|
||||||
elements: [
|
{
|
||||||
{
|
realtimeSort: true,
|
||||||
type: "text",
|
seriesLayoutBy: "column",
|
||||||
left: "center",
|
type: "bar",
|
||||||
bottom: 60,
|
itemStyle: {
|
||||||
style: {
|
color: function (param) {
|
||||||
text: startYear,
|
return countryColors[param.value[3]] || "#5470c6";
|
||||||
font: "bolder 80px monospace",
|
},
|
||||||
fill: "#d6000f",
|
},
|
||||||
|
encode: {
|
||||||
|
x: dimension,
|
||||||
|
y: 3,
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
precision: 1,
|
||||||
|
position: "right",
|
||||||
|
valueAnimation: true,
|
||||||
|
fontFamily: "monospace",
|
||||||
},
|
},
|
||||||
z: 100,
|
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
animationDuration: 0,
|
||||||
};
|
animationDurationUpdate: updateFrequency,
|
||||||
myChart.setOption(option);
|
animationEasing: "linear",
|
||||||
for (let i = startIndex; i < years.length - 1; ++i) {
|
animationEasingUpdate: "linear",
|
||||||
(function (i) {
|
graphic: {
|
||||||
setTimeout(function () {
|
elements: [
|
||||||
updateYear(years[i + 1]);
|
{
|
||||||
}, (i - startIndex) * updateFrequency);
|
type: "text",
|
||||||
})(i);
|
left: "center",
|
||||||
}
|
bottom: 60,
|
||||||
function updateYear(year) {
|
style: {
|
||||||
let source = data.slice(1).filter(function (d) {
|
text: startYear,
|
||||||
return d[4] === year;
|
font: "bolder 80px monospace",
|
||||||
});
|
fill: "#d6000f",
|
||||||
option.series[0].data = source;
|
},
|
||||||
option.graphic.elements[0].style.text = year;
|
z: 100,
|
||||||
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" },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
},
|
};
|
||||||
});
|
// myChart.setOption(option);
|
||||||
seriesList.push({
|
for (let i = startIndex; i < years.length - 1; ++i) {
|
||||||
type: "line",
|
(function (i) {
|
||||||
datasetId: "dataset_CementCO:Emissions",
|
setTimeout(function () {
|
||||||
showSymbol: false,
|
updateYear(years[i + 1]);
|
||||||
name: "CementCO:Emissions",
|
}, (i - startIndex) * updateFrequency);
|
||||||
endLabel: {
|
})(i);
|
||||||
show: true,
|
}
|
||||||
formatter: function (params) {
|
function updateYear(year) {
|
||||||
return params.value[1] + ": " + params.value[0];
|
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: {
|
seriesList.push({
|
||||||
width: 5,
|
type: "line",
|
||||||
},
|
datasetId: "dataset_CementCO:Emissions",
|
||||||
emphasis: {
|
showSymbol: false,
|
||||||
focus: "series",
|
name: "CementCO:Emissions",
|
||||||
},
|
// areaStyle: {},//面性
|
||||||
color: "#000000",
|
endLabel: {
|
||||||
encode: {
|
show: true,
|
||||||
x: "Year",
|
formatter: function (params) {
|
||||||
y: "Income",
|
return params.value[1] + ": " + params.value[0];
|
||||||
label: ["Country", "Income"],
|
},
|
||||||
itemName: "Year",
|
|
||||||
tooltip: ["Income"],
|
|
||||||
},
|
|
||||||
});
|
|
||||||
let options = {
|
|
||||||
animationDuration: 10000,
|
|
||||||
dataset: [
|
|
||||||
{
|
|
||||||
id: "dataset_raw",
|
|
||||||
source: _rawData,
|
|
||||||
},
|
},
|
||||||
...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: {
|
xAxis: {
|
||||||
type: "category",
|
type: "category",
|
||||||
nameLocation: "middle",
|
nameLocation: "middle",
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLabel: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
splitLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
axisLine: {
|
yAxis: {
|
||||||
show: false,
|
type:"value",
|
||||||
},
|
position: "right",
|
||||||
axisLabel: {
|
offset:10,
|
||||||
show: false,
|
// axisLabel:{
|
||||||
},
|
// align:"left",
|
||||||
splitLine: {
|
|
||||||
show: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
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: "",
|
series: seriesList
|
||||||
},
|
}
|
||||||
grid: {
|
myLineChart.setOption(lineOptions);
|
||||||
top:70,
|
// for (let i = startIndex; i < years.length - 1; ++i) {
|
||||||
left: 300,
|
// (function (i) {
|
||||||
},
|
// setTimeout(function () {
|
||||||
series: seriesList,
|
// updateYear(years[i + 1]);
|
||||||
};
|
// }, (i - startIndex) * updateFrequency);
|
||||||
myCharts.setOption(options);
|
// })(i);
|
||||||
},
|
// }
|
||||||
|
// function updateYear(year) {
|
||||||
|
// lineOptions.graphic.elements[0].style.text = year;
|
||||||
|
// myLineChart.setOption(lineOptions);
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue