✨ feat: 图表
This commit is contained in:
砂糖
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div class="energy-analysis-container">
|
||||
<!-- 年份选择与查询按钮区域 -->
|
||||
<div class="query-section">
|
||||
<el-input
|
||||
v-model="year"
|
||||
placeholder="请输入年份"
|
||||
style="width: 200px; margin-right: 10px;"
|
||||
/>
|
||||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 图表区域（含图例、图表类型切换、刷新） -->
|
||||
<div class="chart-section">
|
||||
<el-row :gutter="10" align="middle" style="margin-bottom: 10px;">
|
||||
<!-- 图例 -->
|
||||
<el-col>
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot" style="background-color: #409EFF;"></span>
|
||||
<span>本期</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot" style="background-color: #C084FC;"></span>
|
||||
<span>同期</span>
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- 图表类型切换 + 刷新 -->
|
||||
<el-col :offset="18">
|
||||
<el-button-group>
|
||||
<el-button type="text" @click="chartType = 'bar'">柱状图</el-button>
|
||||
<el-button type="text" @click="chartType = 'line'">折线图</el-button>
|
||||
</el-button-group>
|
||||
<el-button icon="el-icon-refresh" type="text" @click="handleRefresh">刷新</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- ECharts 容器 -->
|
||||
<div ref="chartRef" class="echarts-box" />
|
||||
</div>
|
||||
|
||||
<!-- 同比分析表格 -->
|
||||
<div class="table-section">
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column prop="periodTime" label="本期时间" />
|
||||
<el-table-column prop="currentEnergy" label="本期能耗(Nm3)" />
|
||||
<el-table-column prop="samePeriodEnergy" label="同比能耗(Nm3)" />
|
||||
<el-table-column prop="yearOnYear" label="同比(%)" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'MonthToMonthAnalysis',
|
||||
props: {
|
||||
energyType: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
locationId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
deviceId: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
energyName: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
year: '2025',
|
||||
chartType: 'bar',
|
||||
tableData: [
|
||||
{ periodTime: '1月', currentEnergy: '--', samePeriodEnergy: '--', yearOnYear: '--' },
|
||||
{ periodTime: '2月', currentEnergy: '--', samePeriodEnergy: '--', yearOnYear: '--' },
|
||||
{ periodTime: '3月', currentEnergy: '--', samePeriodEnergy: '--', yearOnYear: '--' },
|
||||
{ periodTime: '4月', currentEnergy: '--', samePeriodEnergy: '--', yearOnYear: '--' },
|
||||
{ periodTime: '5月', currentEnergy: '--', samePeriodEnergy: '--', yearOnYear: '--' },
|
||||
{ periodTime: '6月', currentEnergy: '--', samePeriodEnergy: '--', yearOnYear: '--' },
|
||||
{ periodTime: '7月', currentEnergy: '--', samePeriodEnergy: '--', yearOnYear: '--' },
|
||||
{ periodTime: '8月', currentEnergy: '--', samePeriodEnergy: '--', yearOnYear: '--' },
|
||||
{ periodTime: '9月', currentEnergy: '--', samePeriodEnergy: '--', yearOnYear: '--' },
|
||||
{ periodTime: '10月', currentEnergy: '--', samePeriodEnergy: '--', yearOnYear: '--' },
|
||||
{ periodTime: '11月', currentEnergy: '--', samePeriodEnergy: '--', yearOnYear: '--' },
|
||||
{ periodTime: '12月', currentEnergy: '--', samePeriodEnergy: '--', yearOnYear: '--' }
|
||||
],
|
||||
chartInstance: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.dispose()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
chartType: {
|
||||
handler(newVal) {
|
||||
this.drawChart()
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 初始化图表
|
||||
initChart() {
|
||||
this.chartInstance = echarts.init(this.$refs.chartRef)
|
||||
this.drawChart()
|
||||
// 监听窗口大小变化，调整图表尺寸
|
||||
window.addEventListener('resize', this.handleResize)
|
||||
},
|
||||
|
||||
// 绘制图表
|
||||
drawChart() {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '本期',
|
||||
type: this.chartType,
|
||||
data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90],
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '同期',
|
||||
type: this.chartType,
|
||||
data: [90, 110, 120, 110, 120, 140, 130, 90, 110, 120, 110, 120],
|
||||
itemStyle: {
|
||||
color: '#C084FC'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartInstance.setOption(option)
|
||||
},
|
||||
|
||||
// 处理查询
|
||||
handleQuery() {
|
||||
// 实际项目中这里会调用接口获取数据
|
||||
console.log('查询年份:', this.year)
|
||||
// 模拟数据加载
|
||||
this.tableData = this.tableData.map(item => ({
|
||||
...item,
|
||||
currentEnergy: Math.floor(Math.random() * 1000) + '',
|
||||
samePeriodEnergy: Math.floor(Math.random() * 1000) + '',
|
||||
yearOnYear: (Math.random() * 20 - 10).toFixed(2) + ''
|
||||
}))
|
||||
this.drawChart()
|
||||
},
|
||||
|
||||
// 刷新图表
|
||||
handleRefresh() {
|
||||
this.drawChart()
|
||||
},
|
||||
|
||||
// 处理窗口大小变化
|
||||
handleResize() {
|
||||
if (this.chartInstance) {
|
||||
this.chartInstance.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.energy-analysis-container {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.query-section {
|
||||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.echarts-box {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border: 1px solid #e6e6e6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.table-section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user