187 lines
3.9 KiB
Vue
187 lines
3.9 KiB
Vue
<template>
|
||
<div class="tongbifenxi-line-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="chartDomRef" class="chart-container"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { onMounted, onBeforeUnmount, ref } from 'vue';
|
||
import * as echarts from 'echarts';
|
||
import TitleComponent from '@/components/TitleComponent/index.vue';
|
||
|
||
const chartDomRef = ref<HTMLElement | null>(null);
|
||
const chartInstance = ref<echarts.ECharts | null>(null);
|
||
|
||
const initChart = () => {
|
||
if (!chartDomRef.value) return;
|
||
|
||
chartInstance.value = echarts.init(chartDomRef.value);
|
||
|
||
// 写死的数据
|
||
const dates = ['1号', '2号', '3号', '4号', '5号', '6号', '7号'];
|
||
const growthRates = [1.50, 1.20, 0.50, 0.80, 0.90, 0.30, -2.00];
|
||
|
||
const option: echarts.EChartsOption = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
backgroundColor: '#67c23a',
|
||
borderWidth: 0,
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14
|
||
},
|
||
formatter: (params: any) => {
|
||
return `${params.name}：\n环比增长率：${params.value}%`;
|
||
},
|
||
padding: [10, 15]
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: dates,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#d9d9d9'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#666'
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
min: -2,
|
||
max: 2,
|
||
axisLabel: {
|
||
color: '#666',
|
||
formatter: '{value}%'
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#d9d9d9'
|
||
}
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#f0f0f0',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '环比增长率',
|
||
type: 'line',
|
||
areaStyle: {
|
||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: 'rgba(103, 194, 58, 0.3)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(103, 194, 58, 0.05)'
|
||
}
|
||
])
|
||
},
|
||
lineStyle: {
|
||
color: '#67c23a',
|
||
width: 3
|
||
},
|
||
symbol: 'circle',
|
||
symbolSize: 8,
|
||
itemStyle: {
|
||
color: '#67c23a',
|
||
borderColor: '#fff',
|
||
borderWidth: 2
|
||
},
|
||
emphasis: {
|
||
focus: 'series',
|
||
itemStyle: {
|
||
color: '#67c23a',
|
||
borderColor: '#fff',
|
||
borderWidth: 3,
|
||
shadowBlur: 10,
|
||
shadowColor: 'rgba(103, 194, 58, 0.5)'
|
||
},
|
||
|
||
},
|
||
data: growthRates,
|
||
smooth: true
|
||
}
|
||
]
|
||
};
|
||
|
||
chartInstance.value.setOption(option);
|
||
};
|
||
|
||
const handleResize = () => {
|
||
chartInstance.value?.resize();
|
||
};
|
||
|
||
onMounted(() => {
|
||
initChart();
|
||
window.addEventListener('resize', handleResize);
|
||
});
|
||
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener('resize', handleResize);
|
||
chartInstance.value?.dispose();
|
||
});
|
||
</script>
|
||
|
||
<style scoped>
|
||
.tongbifenxi-line-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 300px;
|
||
padding: 10px;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
}
|
||
|
||
.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 (max-width: 768px) {
|
||
.tongbifenxi-line-container {
|
||
padding: 5px;
|
||
min-height: 250px;
|
||
}
|
||
|
||
.chart-container {
|
||
min-height: 230px;
|
||
}
|
||
}
|
||
</style> |