完成电量分析部分图表

2025-09-20 20:03:46 +08:00
parent 7eabcd203f
commit 55f2aeea39
4 changed files with 583 additions and 0 deletions
--- a/src/views/shengchanManage/powerfenxi/components/tongbifenxiLine.vue
+++ b/src/views/shengchanManage/powerfenxi/components/tongbifenxiLine.vue
@ -0,0 +1,172 @@
+<template>
+  <div class="tongbifenxi-line-container">
+    <div id="tongbifenxiLineChart" class="chart-container"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, ref } from 'vue';
+import * as echarts from 'echarts';
+
+const chartInstance = ref<echarts.ECharts | null>(null);
+
+const initChart = () => {
+  const chartDom = document.getElementById('tongbifenxiLineChart');
+  if (!chartDom) return;
+
+  chartInstance.value = echarts.init(chartDom);
+
+  // 写死的数据
+  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: 'axis',
+      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+      borderColor: '#409eff',
+      textStyle: {
+        color: '#fff'
+      },
+      formatter: (params: any) => {
+        const data = params[0];
+        return `${data.name}:\n环比增长率: ${data.value}%`;
+      },
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985'
+        }
+      }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      containLabel: true
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: dates,
+        axisTick: {
+          alignWithLabel: true
+        },
+        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',
+        stack: 'Total',
+        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)'
+            }
+          ])
+        },
+        emphasis: {
+          focus: 'series'
+        },
+        lineStyle: {
+          color: '#67c23a',
+          width: 3
+        },
+        symbol: 'circle',
+        symbolSize: 8,
+        itemStyle: {
+          color: '#67c23a',
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        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;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.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>