代码更新

src/views/particulars/check.vue

@@ -82,7 +82,7 @@
                 </div>
                 <div class="chart-wrap">
                     <div class="title">异常分析</div>
-                    <alert-chart ref="alert-chart" />
+                    <abnormal ref="abnormal" />
                 </div>
                 <div class="chart-wrap">
                     <div class="title">异常处理情况</div>
@@ -93,12 +93,12 @@
     </div>
 </template>
 <script>
-import AlertChart from './components/AlertChart.vue'
+import Abnormal  from './components/Abnormal.vue'
 import WarnChart from './components/WarnChart.vue'
  export default {
     name:"check",
     components:{
-        AlertChart,
+        Abnormal,
         WarnChart
     },
     data(){
@@ -142,7 +142,7 @@ import WarnChart from './components/WarnChart.vue'
     methods:{
         init(){
             this.$nextTick(()=>{
-                this.$refs['alert-chart'].init();
+                this.$refs['abnormal'].init();
                 this.$refs['warn-chart'].init();
             })
         },

src/views/particulars/components/Abnormal.vue

@@ -0,0 +1,125 @@
+<template>
+    <div id="alert-chart" v-if="status"></div> 
+</template>
+    <script>
+     import * as echarts from 'echarts';
+      export default {
+        name:"Abnormal",
+        data(){
+            return{
+                myChart:null,
+                status:true,
+                option :{
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'shadow'
+                        }
+                    },
+                    legend: {
+                        icon:'rect',
+                        itemWidth:10,
+                        itemHeight:10,
+                        textStyle:{
+                            color:'#fff',
+                            fontSize:10
+                        }
+                    },
+                    grid: {
+                        top:'20%',
+                        left: '3%',
+                        right: '4%',
+                        bottom: '3%',
+                        containLabel: true
+                    },
+                    xAxis: {
+                        type: 'category',
+                        boundaryGap: [0, 0.01],
+                        axisLabel:{
+                            color:'#fff',                        
+                        },
+                        axisLine:{
+                            show:true
+                        },
+                        splitLine: {
+                            show: false,
+                        },
+                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+                    },
+                    yAxis: {
+                        type: 'value',
+                        axisLabel:{
+                            color:'#fff',                       
+                        },
+                        splitLine: {
+                            show: false,
+                        }
+                    },
+                    series: [
+                        {
+                            name: '重大',
+                            type: 'line',
+                            lineStyle:{
+                                color:"#E85454",
+                                width:2
+                            },
+                            showSymbol: false,
+                            data: [2,5, 0, 10, 20, 30,70, 50, 40, 50, 80,20]
+                        },                        
+                        {
+                            name: '较大',
+                            type: 'line',
+                            lineStyle:{
+                                color:"#E58C55",
+                                width:2
+                            },
+                            showSymbol: false,
+                            data: [10,20, 30, 40, 50, 80,20, 30, 40, 50, 80,20]
+                        },
+                        {
+                            name: '一般',
+                            type: 'line',
+                            lineStyle:{
+                                color:"#F3F376",
+                                width:2
+                            },
+                            showSymbol: false,                        
+                            data: [20,30, 40, 50, 60, 70, 40, 50, 60, 70, 40, 50]
+                        },
+                        {
+                            name: '较低',
+                            type: 'line',
+                            lineStyle:{
+                                color: "#6A6AFF",
+                                width:2
+                            },
+                            showSymbol: false,
+                            data: [30,40, 60, 40, 80, 10, 40, 50, 60, 70,10,20]
+                        }
+                    ]
+                }
+            }
+        },
+        methods:{
+            init(){
+                var chartDom = document.getElementById('alert-chart');
+                var myChart = echarts.init(chartDom);
+                
+                this.option && myChart.setOption(this.option);  
+                myChart.on('click', function(params) {
+                    console.log("SensorStatus",params)
+                }); 
+                this.myChart=myChart                     
+            }
+        },
+        destroyed() {
+            this.status=false
+        },
+      }
+    </script>
+    <style lang="scss" scoped>
+    #alert-chart{
+        width: 95%;
+        height: 20vh;
+    }  
+    </style>

src/views/particulars/components/AlertChart.vue

@@ -16,9 +16,14 @@
                             type: 'shadow'
                         }
                     },
+                    showSymbol: false,
                     legend: {
+                        icon:'rect',
+                        itemWidth:10,
+                        itemHeight:10,
                         textStyle:{
-                            color:'#fff'
+                            color:'#fff',
+                            fontSize:10
                         }
                     },
                     grid: {
@@ -49,7 +54,7 @@
                         },
                         splitLine: {
                             show: false,
-                        },
+                        }
                     },
                     series: [
                         {
@@ -59,6 +64,7 @@
                                 color:"rgba(24, 144, 255, 1)",
                                 width:2
                             },
+                            showSymbol: false,
                             data: [10,20, 30, 40, 50, 80,20, 30, 40, 50, 80,20]
                         },
                         {
@@ -67,7 +73,8 @@
                             lineStyle:{
                                 color:"#41E4BB",
                                 width:2
-                            } ,                         
+                            },
+                            showSymbol: false,                         
                             data: [20,30, 40, 50, 60, 70, 40, 50, 60, 70, 40, 50]
                         },
                         {
@@ -77,6 +84,7 @@
                                 color:"#D7C254",
                                 width:2
                             },
+                            showSymbol: false,
                             data: [30,40, 60, 40, 80, 10, 40, 50, 60, 70,10,20]
                         }
                     ]

src/views/particulars/components/WarnChart.vue

@@ -17,8 +17,12 @@
                         }
                     },
                     legend: {
+                        icon:'rect',
+                        itemWidth:10,
+                        itemHeight:10,
                         textStyle:{
-                            color:'#fff'
+                            color:'#fff',
+                            fontSize:10
                         }
                     },
                     grid: {