352 lines
9.7 KiB
Vue
352 lines
9.7 KiB
Vue
|
<template>
|
||
|
|
<div class="chart-container">
|
||
|
|
<!-- 图表标题和时间范围选择器 -->
|
||
|
|
<div class="chart-header">
|
||
|
|
<h2>发电量趋势 (kWh)</h2>
|
||
|
|
<div class="chart-actions">
|
||
|
|
<button @click="timeRange = 'day'" :class="{ active: timeRange === 'day' }">日发电</button>
|
||
|
|
<button @click="timeRange = 'week'" :class="{ active: timeRange === 'week' }">周发电</button>
|
||
|
|
<button @click="timeRange = 'month'" :class="{ active: timeRange === 'month' }">月发电</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 图表内容区域 -->
|
||
|
|
<div ref="chartRef" class="chart-content"></div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { ref, onMounted, watch } from 'vue';
|
||
|
|
import * as echarts from 'echarts';
|
||
|
|
|
||
|
|
// 图表DOM引用
|
||
|
|
const chartRef = ref(null);
|
||
|
|
// 时间范围状态
|
||
|
|
const timeRange = ref('day');
|
||
|
|
// 图表实例
|
||
|
|
let chartInstance = null;
|
||
|
|
|
||
|
|
// 定义颜色常量
|
||
|
|
const ACTUAL_COLOR = '#2A82E4';
|
||
|
|
const THEORETICAL_COLOR = '#67C23A';
|
||
|
|
|
||
|
|
// 根据时间范围返回对应的数据
|
||
|
|
const getChartData = () => {
|
||
|
|
if (timeRange.value === 'day') {
|
||
|
|
return {
|
||
|
|
xAxis: ['03-09', '03-10', '03-11', '03-12', '03-13', '03-14', '03-15', '03-16'],
|
||
|
|
actualData: [35, 65, 60, 55, 45, 50, 45, 30],
|
||
|
|
theoreticalData: [30, 70, 85, 80, 65, 60, 65, 95]
|
||
|
|
};
|
||
|
|
} else if (timeRange.value === 'week') {
|
||
|
|
return {
|
||
|
|
xAxis: ['第1周', '第2周', '第3周', '第4周'],
|
||
|
|
actualData: [280, 360, 320, 400],
|
||
|
|
theoreticalData: [300, 400, 350, 450]
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
// 月数据
|
||
|
|
return {
|
||
|
|
xAxis: ['1月', '2月', '3月', '4月', '5月', '6月'],
|
||
|
|
actualData: [1250, 1420, 1380, 1650, 1520, 1780],
|
||
|
|
theoreticalData: [1350, 1500, 1450, 1700, 1600, 1850]
|
||
|
|
};
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 初始化图表
|
||
|
|
const initChart = () => {
|
||
|
|
if (chartRef.value && !chartInstance) {
|
||
|
|
chartInstance = echarts.init(chartRef.value);
|
||
|
|
}
|
||
|
|
|
||
|
|
const data = getChartData();
|
||
|
|
|
||
|
|
const option = {
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'axis',
|
||
|
|
// 悬停线相关设置
|
||
|
|
axisPointer: {
|
||
|
|
type: 'cross',
|
||
|
|
lineStyle: {
|
||
|
|
color: '#2A82E4',
|
||
|
|
width: 2
|
||
|
|
}
|
||
|
|
},
|
||
|
|
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||
|
|
borderColor: '#e8e8e8',
|
||
|
|
borderWidth:2 ,
|
||
|
|
textStyle: {
|
||
|
|
color: '#333'
|
||
|
|
},
|
||
|
|
formatter: function (params) {
|
||
|
|
const date = params[0].axisValue;
|
||
|
|
const actualValue = params[0].value;
|
||
|
|
const theoreticalValue = params[1].value;
|
||
|
|
|
||
|
|
return `
|
||
|
|
<div style="font-weight: bold;">${date}</div>
|
||
|
|
<div style="color: ${ACTUAL_COLOR};">实际发电量: ${actualValue}</div>
|
||
|
|
<div style="color: ${THEORETICAL_COLOR};">理论发电量: ${theoreticalValue}</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
right: 'center',
|
||
|
|
data: ['实际发电', '理论发电'],
|
||
|
|
top: 0,
|
||
|
|
itemWidth: 10,
|
||
|
|
itemHeight: 10,
|
||
|
|
icon: 'stack',
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 12,
|
||
|
|
color: '#666'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
left: '3%',
|
||
|
|
right: '4%',
|
||
|
|
bottom: '10%',
|
||
|
|
top: '25%',
|
||
|
|
containLabel: true
|
||
|
|
},
|
||
|
|
xAxis: {
|
||
|
|
type: 'category',
|
||
|
|
boundaryGap: false,
|
||
|
|
data: data.xAxis,
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: '#dcdfe6'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#909399',
|
||
|
|
fontSize: 12
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false // 去除刻度线
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true, //显示分割线
|
||
|
|
lineStyle: {
|
||
|
|
type: 'dashed' // 设置分割线为虚线
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
yAxis: {
|
||
|
|
type: 'value',
|
||
|
|
axisLine: {
|
||
|
|
lineStyle: {
|
||
|
|
color: '#dcdfe6'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
axisLabel: {
|
||
|
|
color: '#909399',
|
||
|
|
fontSize: 12
|
||
|
|
},
|
||
|
|
axisTick: {
|
||
|
|
show: false // 去除刻度线
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
show: true, //显示分割线
|
||
|
|
lineStyle: {
|
||
|
|
type: 'dashed' // 设置分割线为虚线
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '实际发电',
|
||
|
|
type: 'line',
|
||
|
|
data: data.actualData,
|
||
|
|
smooth: true,
|
||
|
|
symbol: 'circle',
|
||
|
|
symbolSize: 6,
|
||
|
|
// 开始不显示拐点， 鼠标经过显示
|
||
|
|
showSymbol: false,
|
||
|
|
// 设置拐点颜色以及边框
|
||
|
|
itemStyle: {
|
||
|
|
color: ACTUAL_COLOR
|
||
|
|
},
|
||
|
|
lineStyle: {
|
||
|
|
color: ACTUAL_COLOR,
|
||
|
|
width: 3
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
itemStyle: {
|
||
|
|
color: '#2A82E4',
|
||
|
|
borderColor: '#fff',
|
||
|
|
borderWidth: 3
|
||
|
|
}
|
||
|
|
},
|
||
|
|
areaStyle: {
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: `rgba(${parseInt(ACTUAL_COLOR.slice(1, 3), 16)}, ${parseInt(ACTUAL_COLOR.slice(3, 5), 16)}, ${parseInt(ACTUAL_COLOR.slice(5, 7), 16)}, 0.2)`
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: `rgba(${parseInt(ACTUAL_COLOR.slice(1, 3), 16)}, ${parseInt(ACTUAL_COLOR.slice(3, 5), 16)}, ${parseInt(ACTUAL_COLOR.slice(5, 7), 16)}, 0.05)`
|
||
|
|
}
|
||
|
|
])
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '理论发电',
|
||
|
|
type: 'line',
|
||
|
|
data: data.theoreticalData,
|
||
|
|
smooth: true,
|
||
|
|
symbol: 'circle',
|
||
|
|
symbolSize: 6,
|
||
|
|
itemStyle: {
|
||
|
|
color: THEORETICAL_COLOR
|
||
|
|
},
|
||
|
|
lineStyle: {
|
||
|
|
color: THEORETICAL_COLOR,
|
||
|
|
width: 3
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
itemStyle: {
|
||
|
|
color: '#67C23A',
|
||
|
|
borderColor: '#fff',
|
||
|
|
borderWidth: 3
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 开始不显示拐点， 鼠标经过显示
|
||
|
|
showSymbol: false,
|
||
|
|
areaStyle: {
|
||
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
|
|
{
|
||
|
|
offset: 0,
|
||
|
|
color: `rgba(${parseInt(THEORETICAL_COLOR.slice(1, 3), 16)}, ${parseInt(THEORETICAL_COLOR.slice(3, 5), 16)}, ${parseInt(THEORETICAL_COLOR.slice(5, 7), 16)}, 0.2)`
|
||
|
|
},
|
||
|
|
{
|
||
|
|
offset: 1,
|
||
|
|
color: `rgba(${parseInt(THEORETICAL_COLOR.slice(1, 3), 16)}, ${parseInt(THEORETICAL_COLOR.slice(3, 5), 16)}, ${parseInt(THEORETICAL_COLOR.slice(5, 7), 16)}, 0.05)`
|
||
|
|
}
|
||
|
|
])
|
||
|
|
}
|
||
|
|
},
|
||
|
|
]
|
||
|
|
};
|
||
|
|
|
||
|
|
chartInstance.setOption(option);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 响应窗口大小变化
|
||
|
|
const handleResize = () => {
|
||
|
|
if (chartInstance) {
|
||
|
|
chartInstance.resize();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// 生命周期钩子
|
||
|
|
onMounted(() => {
|
||
|
|
initChart();
|
||
|
|
window.addEventListener('resize', handleResize);
|
||
|
|
|
||
|
|
// 清理函数
|
||
|
|
return () => {
|
||
|
|
window.removeEventListener('resize', handleResize);
|
||
|
|
if (chartInstance) {
|
||
|
|
chartInstance.dispose();
|
||
|
|
chartInstance = null;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听时间范围变化，更新图表
|
||
|
|
watch(timeRange, () => {
|
||
|
|
initChart();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.chart-container {
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 8px;
|
||
|
|
overflow: hidden;
|
||
|
|
height: 400px;
|
||
|
|
width: 100%;
|
||
|
|
padding: 10px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 15px 20px;
|
||
|
|
border-bottom: 1px solid #f0f0f0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-header h2 {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #333;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-actions button {
|
||
|
|
background: none;
|
||
|
|
border: 1px solid #e0e0e0;
|
||
|
|
padding: 5px 12px;
|
||
|
|
border-radius: 4px;
|
||
|
|
margin-left: 8px;
|
||
|
|
cursor: pointer;
|
||
|
|
font-size: 12px;
|
||
|
|
transition: all 0.2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-actions button.active {
|
||
|
|
background-color: #1890ff;
|
||
|
|
color: white;
|
||
|
|
border-color: #1890ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-content {
|
||
|
|
width: 100%;
|
||
|
|
height: calc(100% - 54px);
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.chart-container {
|
||
|
|
height: 350px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
.chart-container {
|
||
|
|
height: 300px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-header {
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-actions {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-actions button {
|
||
|
|
margin: 0;
|
||
|
|
flex: 1;
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-actions button:last-child {
|
||
|
|
margin-right: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.model {
|
||
|
|
padding: 20px;
|
||
|
|
background-color: rgba(242, 248, 252, 1);
|
||
|
|
}
|
||
|
|
</style>
|