183 lines
3.7 KiB
Vue
183 lines
3.7 KiB
Vue
<template>
|
|
<div class="duibifenxi-bar-container">
|
|
<div class="title">
|
|
<TitleComponent title="发电量同比分析" :font-level="2" />
|
|
<el-select placeholder="请选择线路" style="width: 150px;">
|
|
<el-option label="A线路" value="all"></el-option>
|
|
</el-select>
|
|
</div>
|
|
<div ref="chartRef" class="chart-container"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
import * as echarts from 'echarts'
|
|
|
|
// 定义组件props
|
|
interface CompareData {
|
|
dates: string[]
|
|
currentPeriodData: number[]
|
|
lastYearData: number[]
|
|
}
|
|
|
|
const props = defineProps<{
|
|
compareData?: CompareData
|
|
}>()
|
|
|
|
const chartRef = ref<HTMLElement>()
|
|
let chartInstance: echarts.ECharts | null = null
|
|
|
|
// 默认数据
|
|
const defaultCompareData: CompareData = {
|
|
dates: ['1号', '2号', '3号', '4号', '5号', '6号', '7号'],
|
|
currentPeriodData: [90, 80, 75, 89, 60, 76, 73],
|
|
lastYearData: [60, 53, 65, 76, 69, 52, 65]
|
|
}
|
|
|
|
// 初始化图表
|
|
const initChart = () => {
|
|
if (!chartRef.value) return
|
|
|
|
chartInstance = echarts.init(chartRef.value)
|
|
const data = props.compareData || defaultCompareData
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
formatter: function (params: any) {
|
|
const current = params[0]
|
|
const lastYear = params[1]
|
|
let result = `${current.name}<br/>`
|
|
result += `${current.marker}${current.seriesName}: ${current.value}Kwh<br/>`
|
|
result += `${lastYear.marker}${lastYear.seriesName}: ${lastYear.value}Kwh`
|
|
return result
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['当前周期', '去年同期'],
|
|
textStyle: {
|
|
color: '#333'
|
|
},
|
|
top: 10
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: data.dates,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#d9d9d9'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#666'
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
color: '#666',
|
|
formatter: '{value} Kwh',
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#f0f0f0',
|
|
type: 'dashed'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '当前周期',
|
|
type: 'bar',
|
|
data: data.currentPeriodData,
|
|
itemStyle: {
|
|
color: '#1890ff'
|
|
},
|
|
barWidth: '30%',
|
|
emphasis: {
|
|
focus: 'series'
|
|
}
|
|
},
|
|
{
|
|
name: '去年同期',
|
|
type: 'bar',
|
|
data: data.lastYearData,
|
|
itemStyle: {
|
|
color: '#52c41a'
|
|
},
|
|
barWidth: '30%',
|
|
emphasis: {
|
|
focus: 'series'
|
|
}
|
|
}
|
|
]
|
|
}
|
|
|
|
chartInstance.setOption(option)
|
|
}
|
|
|
|
// 响应式处理
|
|
const handleResize = () => {
|
|
chartInstance?.resize()
|
|
}
|
|
|
|
// 组件挂载
|
|
onMounted(() => {
|
|
initChart()
|
|
window.addEventListener('resize', handleResize)
|
|
})
|
|
|
|
// 组件卸载
|
|
onUnmounted(() => {
|
|
window.removeEventListener('resize', handleResize)
|
|
chartInstance?.dispose()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.duibifenxi-bar-container {
|
|
padding: 10px;
|
|
background: #fff;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 300px;
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
width: 100%;
|
|
}
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 280px;
|
|
}
|
|
// 响应式调整
|
|
@media screen and (max-width: 768px) {
|
|
.duibifenxi-bar-container {
|
|
padding: 5px;
|
|
min-height: 250px;
|
|
}
|
|
|
|
.chart-container {
|
|
min-height: 230px;
|
|
}
|
|
}
|
|
</style> |