更新单词拼写错误，新增首页

2025-06-16 22:46:40 +08:00
parent f2dff98cba
commit da100a4fa7
10 changed files with 637 additions and 6 deletions
--- a/src/views/ems/home/GjdjfbChart.vue
+++ b/src/views/ems/home/GjdjfbChart.vue
@ -0,0 +1,122 @@
+
+<template>
+  <el-card shadow="always" class="chart-card-container">
+    <div slot="header">
+      <span class="chart-title">告警等级分布</span>
+    </div>
+    <div style="height: 360px" id="gjdjfbChart"/>
+  </el-card>
+</template>
+
+<style scoped lang="scss">
+.chart-card-container{
+  ::v-deep {
+    .el-card__header{
+      padding:14px;
+      border-bottom: none;
+      font-size: 12px;
+      background: #F1F5FB ;
+      .chart-title{
+        font-weight: 500;
+        color:#333333;
+      }
+      .el-button--text{
+        color: #666666;
+      }
+    }
+    .el-card__body{
+      padding:0;
+    }
+  }
+}
+</style>
+<script>
+import * as echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '@/mixins/ems/resize'
+
+export default {
+  mixins: [resize],
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.querySelector('#gjdjfbChart'), 'macarons')
+      this.setOptions()
+    },
+    setOptions() {
+      this.chart.setOption({
+        color:['#3C81FF','#FFBE29'],
+        legend: {
+          left: 'center',
+          bottom: '10',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
+          }
+        },
+        textStyle:{
+          color:"#333333",
+        },
+        xAxis: {
+          data: ['A级','B级','C级','D级','E级','F级'],
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            }
+          }
+        },
+        yAxis: [{
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        },{
+          type: 'value',
+          axisLine: {
+            lineStyle:{
+              color: '#333333',
+            },
+            onZero:false
+          }
+        }],
+        series: [
+        {
+          name:'数据一',
+          yAxisIndex:0,
+          data: [80,92,1,34,90,130,320],
+          type: 'line',
+        },
+        {
+          name:'数据二',
+          yAxisIndex:1,
+          data: [89,9,80,4,100,30,30],
+          type: 'bar',
+        }
+          ]
+      })
+    }
+  }
+}
+
+</script>