274 lines
6.3 KiB
Vue
274 lines
6.3 KiB
Vue
<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],
|
|
[3, 36.5, 4, "CCUS碳减排", 2025],
|
|
|
|
[33, 34.05, 33, "低碳水泥碳减排", 2030],
|
|
[16, 39, 26, "替代燃料碳减排", 2030],
|
|
[10, 32, 10, "清洁能源电力碳减排", 2030],
|
|
[18, 32.2, 18, "能效提升技术碳减排", 2030],
|
|
[7, 36.57, 9, "CCUS碳减排", 2030],
|
|
|
|
[118, 34.05, 78, "低碳水泥碳减排", 2040],
|
|
[68, 39, 68, "替代燃料碳减排", 2040],
|
|
[17, 32, 17, "清洁能源电力碳减排", 2040],
|
|
[18, 32.2, 18, "能效提升技术碳减排", 2040],
|
|
[14, 36.57, 19, "CCUS碳减排", 2040],
|
|
|
|
[157, 34.05, 118, "低碳水泥碳减排", 2050],
|
|
[111, 39, 111, "替代燃料碳减排", 2050],
|
|
[23, 32, 23, "清洁能源电力碳减排", 2050],
|
|
[16, 32.2, 16, "能效提升技术碳减排", 2050],
|
|
[41, 36.57, 57, "CCUS碳减排", 2050],
|
|
|
|
[196, 34.05, 118, "低碳水泥碳减排", 2060],
|
|
[177, 39, 117, "替代燃料碳减排", 2060],
|
|
[26, 32, 26, "清洁能源电力碳减排", 2060],
|
|
[16, 32.2, 16, "能效提升技术碳减排", 2060],
|
|
[184, 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],
|
|
[559, "水泥碳排放", 2025],
|
|
[523, "水泥碳排放", 2030],
|
|
[386, "水泥碳排放", 2040],
|
|
[273, "水泥碳排放", 2050],
|
|
[23, "水泥碳排放", 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];
|
|
},
|
|
},
|
|
lineStyle: {
|
|
width: 5,
|
|
},
|
|
emphasis: {
|
|
focus: "series",
|
|
},
|
|
// color: "#43fb43",//绿色
|
|
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: {
|
|
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>
|