fix:echarts动态壮壮图折线图测试demo

This commit is contained in:
shijing 2024-07-23 09:18:36 +08:00
parent ee809aa571
commit 8a1c7cb11e
1 changed files with 269 additions and 0 deletions

269
src/views/wpm_gx/chart.vue Normal file
View File

@ -0,0 +1,269 @@
<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],
[4, 36.5, 4, "CCUS碳减排", 2025],
[33, 34.05, 33, "低碳水泥碳减排", 2030],
[26, 39, 26, "替代燃料碳减排", 2030],
[10, 32, 10, "清洁能源电力碳减排", 2030],
[18, 32.2, 18, "能效提升技术碳减排", 2030],
[9, 36.57, 9, "CCUS碳减排", 2030],
[78, 34.05, 78, "低碳水泥碳减排", 2040],
[68, 39, 68, "替代燃料碳减排", 2040],
[17, 32, 17, "清洁能源电力碳减排", 2040],
[18, 32.2, 18, "能效提升技术碳减排", 2040],
[19, 36.57, 19, "CCUS碳减排", 2040],
[118, 34.05, 118, "低碳水泥碳减排", 2050],
[111, 39, 111, "替代燃料碳减排", 2050],
[23, 32, 23, "清洁能源电力碳减排", 2050],
[16, 32.2, 16, "能效提升技术碳减排", 2050],
[57, 36.57, 57, "CCUS碳减排", 2050],
[118, 34.05, 118, "低碳水泥碳减排", 2060],
[117, 39, 117, "替代燃料碳减排", 2060],
[26, 32, 26, "清洁能源电力碳减排", 2060],
[16, 32.2, 16, "能效提升技术碳减排", 2060],
[254, 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],
[558, "水泥碳排放", 2025],
[520, "水泥碳排放", 2030],
[420, "水泥碳排放", 2040],
[296, "水泥碳排放", 2050],
[31, "水泥碳排放", 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];
},
},
emphasis: {
focus: "series",
},
color: "green",
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>