163 lines
4.1 KiB
Vue
163 lines
4.1 KiB
Vue
<template>
|
|
<div ref="chart" class="chart-container"></div>
|
|
</template>
|
|
|
|
<script>
|
|
import echarts from "echarts";
|
|
import { currentGET } from "api/modules";
|
|
|
|
export default {
|
|
name: "MonthCarbonChart",
|
|
data() {
|
|
return {
|
|
monthItems: [],
|
|
monthCarbon: [],
|
|
colors: ["#10B981", "#85E5C2", "#EAFAF5"]
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getMonthData();
|
|
window.addEventListener("resize", this.handleResize);
|
|
},
|
|
beforeDestroy() {
|
|
window.removeEventListener("resize", this.handleResize);
|
|
if (this.chart) {
|
|
this.chart.dispose();
|
|
}
|
|
},
|
|
methods: {
|
|
handleResize() {
|
|
if (this.chart) {
|
|
this.chart.resize();
|
|
}
|
|
},
|
|
getMonthData() {
|
|
currentGET("big2").then((res) => {
|
|
console.log("月度碳减排");
|
|
this.monthItems = res.data;
|
|
|
|
// 初始化12个月的数据为0
|
|
this.monthCarbon = new Array(12).fill(0);
|
|
|
|
this.monthItems.forEach((item) => {
|
|
let month = parseInt(item.months.substring(5, 7));
|
|
this.monthCarbon[month - 1] = item.monthCarbon;
|
|
});
|
|
|
|
console.log("碳减排：" + this.monthCarbon);
|
|
this.initChart();
|
|
});
|
|
},
|
|
initChart() {
|
|
this.$nextTick(() => {
|
|
if (!this.$refs.chart) return;
|
|
|
|
const chart = echarts.init(this.$refs.chart);
|
|
|
|
// 根据数据值生成渐变色
|
|
const getColor = (value, maxValue) => {
|
|
if (maxValue === 0) return this.colors[2];
|
|
const ratio = value / maxValue;
|
|
if (ratio > 0.66) return this.colors[0]; // 深色 #10B981
|
|
if (ratio > 0.33) return this.colors[1]; // 中色 #85E5C2
|
|
return this.colors[2]; // 浅色 #EAFAF5
|
|
};
|
|
|
|
const maxValue = Math.max(...this.monthCarbon);
|
|
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
backgroundColor: "rgba(255, 255, 255, 0.9)",
|
|
borderColor: "#10B981",
|
|
borderWidth: 1,
|
|
textStyle: { color: "#333333" },
|
|
formatter: (params) => {
|
|
return `${params[0].name}<br/>碳减排量：${params[0].value}吨`;
|
|
},
|
|
},
|
|
grid: {
|
|
left: "12%",
|
|
right: "8%",
|
|
top: "15%",
|
|
bottom: "12%",
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
|
|
axisLine: {
|
|
lineStyle: { color: "#d1d5db" }
|
|
},
|
|
axisLabel: {
|
|
color: "#64748b",
|
|
fontSize: 11,
|
|
interval: 0, // 显示所有标签
|
|
rotate: 0
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: "value",
|
|
name: "吨",
|
|
nameTextStyle: {
|
|
color: "#64748b",
|
|
fontSize: 12
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: "#64748b",
|
|
fontSize: 11
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "#f1f5f9",
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: "碳减排量",
|
|
type: "bar",
|
|
data: this.monthCarbon.map(value => ({
|
|
value: value,
|
|
itemStyle: {
|
|
color: getColor(value, maxValue)
|
|
}
|
|
})),
|
|
barWidth: "50%",
|
|
barMaxWidth: 28,
|
|
itemStyle: {
|
|
borderRadius: [4, 4, 0, 0]
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
color: "#059669"
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
chart.setOption(option);
|
|
this.chart = chart;
|
|
this.chart.resize();
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 200px;
|
|
}
|
|
</style>
|