maintenance_system/src/views/integratedManage/stateManage/components/stateTrend.vue

<template>
    <div class="chart-container">
        <!--组件温度（℃）  图表内容区域 -->
        <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);
// 图表实例
let chartInstance = null;

// 初始化图表
const initChart = () => {
    if (chartRef.value && !chartInstance) {
        chartInstance = echarts.init(chartRef.value);
    }
    const option = {
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         // 坐标轴指示器，坐标轴触发有效
         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
   },
   legend: {
      show: true,
      left: '8%',
      icon: 'square', 
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
         color: '#4E5969'
      }
   },
   xAxis: {
      type: 'category',
      axisTick: {
         show: false
      },
      axisLabel: {
         textStyle: {
            color: '#4E5969'
         }
      },
      axisLine: {
         lineStyle: {
            color: '#EAEBF0'
         }
      },
      data: ['9-12', '9-13', '9-14', '9-15', '9-16', '9-17', '9-18']
   },
   yAxis: {
      type: 'value',
      max: 150,
      interval: 50,
      axisLabel: {
         textStyle: {
            color: '#4E5969'
         }
      },
      splitLine: {
         show: true,
         lineStyle: {
            color: '#EAEBF0',
            type: 'dashed'
         }
      }
   },
   series: [
      {
         name: '正常',
         data: [20, 10, 50, 80, 70, 10, 30],
         type: 'bar',
         stack: 'one',
         color: '#7339F5',
         itemStyle: {
            // borderWidth: 1,
            borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
            barBorderRadius: 8
         },
         barWidth: '20',
      },
      {
         name: '中断',
         data: [80, 30, 50, 80, 70, 10, 30],
         type: 'bar',
         stack: 'one', //堆叠
         color: '#FF8A00',
         itemStyle: {
            borderWidth: 1,
            borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
            barBorderRadius: 8
         },
      },
      {
         name: '异常',
         data: [50, 30, 50, 80, 70, 10, 30],
         type: 'bar',
         stack: 'one', //堆叠
         color: '#DE4848',
         itemStyle: {
            borderWidth: 1,
            borderColor: 'rgba(255, 255, 255, 1)', //同背景色一样
            barBorderRadius: 8
         },
         barWidth: '12',
      }
   ]
};

    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;
        }
    };
});


</script>

<style scoped>
.chart-container {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    height: 400px;
    width: 100%;
    padding: 5px;
    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-content {
    width: 100%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
}

@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;
    }
}
</style>