ylyx-cli 1.0.16 → 1.1.0

package/templates/vue-app/files/src/views/institutionMonitor/components/LineChart.vue

@@ -1,191 +1,191 @@
-<template>
-  <div :class="className" :style="{ height: height, width: sidebar.opened ? '78vw' : '88vw' }" />
-</template>
-
-<script>
-import echarts from 'echarts';
-require('echarts/theme/macarons'); // echarts theme
-import resize from '../mixins/resize';
-import { mapGetters } from 'vuex';
-export default {
-  mixins: [resize],
-  props: {
-    className: {
-      type: String,
-      default: 'chart',
-    },
-    width: {
-      type: String,
-      default: '100%',
-    },
-    height: {
-      type: String,
-      default: '350px',
-    },
-    autoResize: {
-      type: Boolean,
-      default: true,
-    },
-    chartData: {
-      type: Object,
-      required: true,
-    },
-    xData: {
-      type: Array,
-      required: true,
-    },
-  },
-
-  computed: {
-    ...mapGetters(['sidebar']),
-  },
-
-  data() {
-    return {
-      chart: null,
-    };
-  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        this.setOptions(val);
-      },
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart();
-    });
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return;
-    }
-    this.chart.dispose();
-    this.chart = null;
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$el, 'macarons');
-      this.setOptions(this.chartData);
-    },
-    setOptions({ dayAverageCount, dayMonitorInfo, dayuploadCount } = {}) {
-      this.chart.setOption({
-        xAxis: {
-          data: this.xData,
-          boundaryGap: true,
-          axisTick: {
-            show: false,
-          },
-          axisLabel: {
-            color: '#333',
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: '#E0E6F1',
-            },
-          },
-          splitArea: {
-            show: false,
-          },
-        },
-        grid: {
-          left: 10,
-          right: 10,
-          bottom: 50,
-          top: 60,
-          containLabel: true,
-        },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-          },
-          padding: [5, 10],
-        },
-        yAxis: {
-          axisTick: {
-            show: false,
-          },
-          axisLabel: {
-            color: '#333',
-          },
-          axisLine: {
-            show: false,
-          },
-          splitArea: {
-            show: false,
-          },
-        },
-        legend: {
-          right: 0,
-          data: ['日均检查量', '每日归档量', '日报上传量'],
-        },
-        series: [
-          {
-            name: '日均检查量',
-            smooth: false,
-            symbol: 'circle',
-            symbolSize: '8',
-            itemStyle: {
-              normal: {
-                color: '#1890FF',
-                lineStyle: {
-                  color: '#1890FF',
-                  width: 2,
-                },
-              },
-            },
-            type: 'line',
-            data: dayMonitorInfo,
-            animationDuration: 2800,
-            animationEasing: 'cubicInOut',
-          },
-          {
-            name: '每日归档量',
-            smooth: false,
-            type: 'line',
-            symbol: 'circle',
-            symbolSize: '8',
-            itemStyle: {
-              normal: {
-                color: '#00A59B',
-                lineStyle: {
-                  color: '#00A59B',
-                  width: 2,
-                },
-              },
-            },
-            data: dayAverageCount,
-            animationDuration: 2800,
-            animationEasing: 'quadraticOut',
-          },
-          {
-            name: '日报上传量',
-            smooth: false,
-            type: 'line',
-            symbol: 'circle',
-            symbolSize: '8',
-            itemStyle: {
-              normal: {
-                color: '#f5a483',
-                lineStyle: {
-                  color: '#f5a483',
-                  width: 2,
-                },
-              },
-            },
-            data: dayuploadCount,
-            animationDuration: 2800,
-            animationEasing: 'quadraticOut',
-          },
-        ],
-      });
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>
+<template>
+  <div :class="className" :style="{ height: height, width: sidebar.opened ? '78vw' : '88vw' }" />
+</template>
+
+<script>
+import echarts from 'echarts';
+require('echarts/theme/macarons'); // echarts theme
+import resize from '../mixins/resize';
+import { mapGetters } from 'vuex';
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart',
+    },
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: '350px',
+    },
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+    chartData: {
+      type: Object,
+      required: true,
+    },
+    xData: {
+      type: Array,
+      required: true,
+    },
+  },
+
+  computed: {
+    ...mapGetters(['sidebar']),
+  },
+
+  data() {
+    return {
+      chart: null,
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        this.setOptions(val);
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$el, 'macarons');
+      this.setOptions(this.chartData);
+    },
+    setOptions({ dayAverageCount, dayMonitorInfo, dayuploadCount } = {}) {
+      this.chart.setOption({
+        xAxis: {
+          data: this.xData,
+          boundaryGap: true,
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: '#333',
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#E0E6F1',
+            },
+          },
+          splitArea: {
+            show: false,
+          },
+        },
+        grid: {
+          left: 10,
+          right: 10,
+          bottom: 50,
+          top: 60,
+          containLabel: true,
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+          },
+          padding: [5, 10],
+        },
+        yAxis: {
+          axisTick: {
+            show: false,
+          },
+          axisLabel: {
+            color: '#333',
+          },
+          axisLine: {
+            show: false,
+          },
+          splitArea: {
+            show: false,
+          },
+        },
+        legend: {
+          right: 0,
+          data: ['日均检查量', '每日归档量', '日报上传量'],
+        },
+        series: [
+          {
+            name: '日均检查量',
+            smooth: false,
+            symbol: 'circle',
+            symbolSize: '8',
+            itemStyle: {
+              normal: {
+                color: '#1890FF',
+                lineStyle: {
+                  color: '#1890FF',
+                  width: 2,
+                },
+              },
+            },
+            type: 'line',
+            data: dayMonitorInfo,
+            animationDuration: 2800,
+            animationEasing: 'cubicInOut',
+          },
+          {
+            name: '每日归档量',
+            smooth: false,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: '8',
+            itemStyle: {
+              normal: {
+                color: '#00A59B',
+                lineStyle: {
+                  color: '#00A59B',
+                  width: 2,
+                },
+              },
+            },
+            data: dayAverageCount,
+            animationDuration: 2800,
+            animationEasing: 'quadraticOut',
+          },
+          {
+            name: '日报上传量',
+            smooth: false,
+            type: 'line',
+            symbol: 'circle',
+            symbolSize: '8',
+            itemStyle: {
+              normal: {
+                color: '#f5a483',
+                lineStyle: {
+                  color: '#f5a483',
+                  width: 2,
+                },
+              },
+            },
+            data: dayuploadCount,
+            animationDuration: 2800,
+            animationEasing: 'quadraticOut',
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>