no message

resources/js/components/Charts/lineMarker.vue

+<template>
+  <div :id="id" :class="className" :style="{height:height,width:width}" />
+</template>
+
+<script>
+import echarts from 'echarts';
+import resize from './mixins/resize';
+import { userdevicemonthcount } from '@/api/homepage';
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart',
+    },
+    id: {
+      type: String,
+      default: 'chart',
+    },
+    width: {
+      type: String,
+      default: '200px',
+    },
+    height: {
+      type: String,
+      default: '200px',
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      userdevicepolice: [],
+      userdevicecount: [],
+    };
+  },
+  created() {
+    this.UserStatistics();
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      const xData = (function() {
+        const data = [];
+        const date = new Date();
+        for (let i = 1; i < date.getMonth() + 1 + 1; i++) {
+          data.push(i + '月');
+        }
+        return data;
+      }());
+      this.chart = echarts.init(document.getElementById(this.id));
+      this.chart.setOption({
+        backgroundColor: '#394056',
+        title: {
+          top: 20,
+          text: '设备统计',
+          textStyle: {
+            fontWeight: 'normal',
+            fontSize: 16,
+            color: '#F1F1F3',
+          },
+          left: '1%',
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            lineStyle: {
+              color: '#57617B',
+            },
+          },
+        },
+        legend: {
+          top: 20,
+          icon: 'rect',
+          itemWidth: 14,
+          itemHeight: 5,
+          itemGap: 13,
+          data: ['设备数量', '报警数量'],
+          right: '4%',
+          textStyle: {
+            fontSize: 12,
+            color: '#F1F1F3',
+          },
+        },
+        grid: {
+          top: 100,
+          left: '2%',
+          right: '2%',
+          bottom: '2%',
+          containLabel: true,
+        },
+        xAxis: [{
+          type: 'category',
+          boundaryGap: false,
+          axisLine: {
+            lineStyle: {
+              color: '#57617B',
+            },
+          },
+          data: xData,
+        }],
+        yAxis: [{
+          type: 'value',
+          name: '(%)',
+          axisTick: {
+            show: false,
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#57617B',
+            },
+          },
+          axisLabel: {
+            margin: 10,
+            textStyle: {
+              fontSize: 14,
+            },
+          },
+          splitLine: {
+            lineStyle: {
+              color: '#57617B',
+            },
+          },
+        }],
+        series: [{
+          name: '设备数量',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1,
+            },
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(0, 136, 212, 0.3)',
+              }, {
+                offset: 0.8,
+                color: 'rgba(0, 136, 212, 0)',
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10,
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(0,136,212)',
+              borderColor: 'rgba(0,136,212,0.2)',
+              borderWidth: 12,
+            },
+          },
+          data: this.userdevicecount,
+        }, {
+          name: '报警数量',
+          type: 'line',
+          smooth: true,
+          symbol: 'circle',
+          symbolSize: 5,
+          showSymbol: false,
+          lineStyle: {
+            normal: {
+              width: 1,
+            },
+          },
+          areaStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                offset: 0,
+                color: 'rgba(219, 50, 51, 0.3)',
+              }, {
+                offset: 0.8,
+                color: 'rgba(219, 50, 51, 0)',
+              }], false),
+              shadowColor: 'rgba(0, 0, 0, 0.1)',
+              shadowBlur: 10,
+            },
+          },
+          itemStyle: {
+            normal: {
+              color: 'rgb(219,50,51)',
+              borderColor: 'rgba(219,50,51,0.2)',
+              borderWidth: 12,
+            },
+          },
+          data: this.userdevicepolice,
+        }],
+      });
+    },
+    UserStatistics() {
+      userdevicemonthcount()
+        .then(response => {
+          if (response.code === 200) {
+            this.userdevicecount = response.data.devicedata;
+            this.userdevicepolice = response.data.devicepolice;
+            this.initChart();
+          }
+        })
+        .catch(err => {
+          console.log(err);
+        });
+    },
+  },
+};
+</script>