ylyx-cli 1.0.15 → 1.0.16

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

@@ -1,296 +1,296 @@
-<template>
-  <div class="line-box">
-    <div
-      id="myChartDraw"
-      ref="myChartDraw"
-      :style="{ height: height, width: '100%' }"
-      v-show="isShow" />
-    <el-empty v-show="!isShow" :image-size="130"></el-empty>
-    <el-tooltip
-      class="item"
-      effect="dark"
-      content="审核报告量不随软件类型变化"
-      placement="top-start">
-      <div class="el-icon-question"></div>
-    </el-tooltip>
-  </div>
-</template>
-
-<script>
-import echarts from 'echarts';
-require('echarts/theme/macarons'); // echarts theme
-// import resize from "../mixins/resize";
-
-export default {
-  props: {
-    width: {
-      type: String,
-      default: '100%',
-    },
-    height: {
-      type: String,
-      default: '350px',
-    },
-    autoResize: {
-      type: Boolean,
-      default: true,
-    },
-    chartData: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      chart: null,
-      isShow: false,
-    };
-  },
-  watch: {
-    chartData: {
-      deep: true,
-      handler(val) {
-        if (val.datas.length > 0) {
-          this.isShow = true;
-          this.setOptions(this.chartData);
-        } else {
-          this.isShow = false;
-        }
-      },
-    },
-  },
-  mounted() {
-    this.$nextTick(() => {
-      this.initChart();
-    });
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return;
-    }
-    this.chart.dispose();
-    this.chart = null;
-  },
-  methods: {
-    initChart() {
-      this.chart = echarts.init(this.$refs.myChartDraw);
-      console.log(this.chartData, 'this.chartData');
-    },
-    getReportRate(data) {
-      let rate;
-      if (data[1].value == 0) {
-        rate = '-';
-      } else {
-        rate = ((data[0].value / data[1].value) * 100).toFixed(2) + '%';
-      }
-      return rate;
-    },
-    setOptions() {
-      let _this = this;
-      this.chart.setOption({
-        tooltip: {
-          trigger: 'axis',
-          formatter(params) {
-            let str = '';
-            str += `<div>
-            <p>${params[0].seriesName}：${params[0].value}</p>
-            <p>${params[1].seriesName}：${params[1].value}</p>
-            <p>报告转化率：${_this.getReportRate(params)}</p>
-            </div>`;
-            return str;
-          },
-        },
-        legend: {
-          show: true,
-          // icon: "roundRect",
-          right: '45%',
-          top: '0',
-          itemWidth: 10, // 标签宽度为20px
-          itemHeight: 10,
-        },
-        xAxis: {
-          type: 'category',
-          axisLine: {
-            show: true, // 是否显示坐标轴轴线
-            lineStyle: {
-              color: '#E0E6F1', // 坐标轴线线的颜色
-              type: 'dotted', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
-            },
-          },
-          axisTick: {
-            show: true, // 是否显示坐标轴刻度
-          },
-          axisLabel: { color: '#333333' },
-          boundaryGap: false,
-          data: this.chartData.times,
-        },
-        yAxis: [
-          {
-            name: '打印报告量',
-            type: 'value',
-            // min:0,
-            // minInterval:1,
-            axisLabel: {
-              formatter: val => {
-                if (this.isShowPercentage) {
-                  return val + '%';
-                } else {
-                  return val;
-                }
-              },
-            },
-            splitLine: {
-              show: true,
-              lineStyle: {
-                type: 'dotted',
-                color: '#E0E6F1',
-              },
-            },
-            axisLine: {
-              show: false, // 是否显示坐标轴轴线
-              lineStyle: {
-                color: '#333333', // 坐标轴线线的颜色
-                type: 'dotted', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
-              },
-            },
-            axisTick: {
-              show: false, // 是否显示坐标轴刻度
-            },
-          },
-          {
-            name: '审核报告量',
-            type: 'value',
-            axisLabel: {
-              formatter: val => {
-                return val;
-              },
-            },
-            splitLine: {
-              show: false,
-              lineStyle: {
-                type: 'dotted',
-                color: '#E0E6F1',
-              },
-            },
-            axisLine: {
-              show: false, // 是否显示坐标轴轴线
-              lineStyle: {
-                color: '#333333', // 坐标轴线线的颜色
-                type: 'dotted', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
-              },
-            },
-            axisTick: {
-              show: false, // 是否显示坐标轴刻度
-            },
-          },
-        ],
-        grid: {
-          left: '32px',
-          right: '32px',
-          top: '10%',
-          bottom: '15px',
-          containLabel: true,
-        },
-        dataZoom: [
-          {
-            type: 'inside', //详细配置可见echarts官网
-            zoomLock: true,
-          },
-        ],
-        series: [
-          {
-            areaStyle: {
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: 'rgba(2, 152, 250, 0.6)', // 100% 处的颜色
-                  },
-
-                  {
-                    offset: 1,
-                    color: '#FFFFFF', //   0% 处的颜色
-                  },
-                ],
-                global: false, // 缺省为 false
-              },
-            },
-            data: this.chartData.datas,
-            type: 'line',
-            name: '打印报告量',
-            smooth: false,
-            itemStyle: {
-              normal: {
-                color: '#0298FA', //改变折线点的颜色
-                lineStyle: {
-                  color: 'rgba(2, 152, 250, 0.8)', //改变折线颜色
-                },
-              },
-            },
-          },
-          {
-            areaStyle: {
-              color: {
-                type: 'linear',
-                x: 0,
-                y: 0,
-                x2: 0,
-                y2: 1,
-                colorStops: [
-                  {
-                    offset: 0,
-                    color: 'rgba(240, 190, 76, 0.6)', // 100% 处的颜色
-                  },
-
-                  {
-                    offset: 1,
-                    color: '#FFFFFF', //   0% 处的颜色
-                  },
-                ],
-                global: false, // 缺省为 false
-              },
-            },
-            data: this.chartData.auditDatas,
-            type: 'line',
-            name: '审核报告量',
-            smooth: false,
-            yAxisIndex: 1,
-            itemStyle: {
-              normal: {
-                color: '#F0BE4C', //改变折线点的颜色
-                lineStyle: {
-                  color: 'rgba(240, 190, 76, 0.8)', //改变折线颜色
-                  width: 3,
-                },
-              },
-            },
-          },
-        ],
-      });
-      this.$nextTick(() => {
-        _this.chart.resize();
-      });
-      window.addEventListener('resize', function () {
-        _this.chart.resize();
-      });
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.line-box {
-  height: 350px;
-  position: relative;
-  .el-icon-question {
-    position: absolute;
-    left: 55%;
-    top: 0;
-    color: #666;
-  }
-}
-</style>
+<template>
+  <div class="line-box">
+    <div
+      id="myChartDraw"
+      ref="myChartDraw"
+      :style="{ height: height, width: '100%' }"
+      v-show="isShow" />
+    <el-empty v-show="!isShow" :image-size="130"></el-empty>
+    <el-tooltip
+      class="item"
+      effect="dark"
+      content="审核报告量不随软件类型变化"
+      placement="top-start">
+      <div class="el-icon-question"></div>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts';
+require('echarts/theme/macarons'); // echarts theme
+// import resize from "../mixins/resize";
+
+export default {
+  props: {
+    width: {
+      type: String,
+      default: '100%',
+    },
+    height: {
+      type: String,
+      default: '350px',
+    },
+    autoResize: {
+      type: Boolean,
+      default: true,
+    },
+    chartData: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      chart: null,
+      isShow: false,
+    };
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler(val) {
+        if (val.datas.length > 0) {
+          this.isShow = true;
+          this.setOptions(this.chartData);
+        } else {
+          this.isShow = false;
+        }
+      },
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return;
+    }
+    this.chart.dispose();
+    this.chart = null;
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.myChartDraw);
+      console.log(this.chartData, 'this.chartData');
+    },
+    getReportRate(data) {
+      let rate;
+      if (data[1].value == 0) {
+        rate = '-';
+      } else {
+        rate = ((data[0].value / data[1].value) * 100).toFixed(2) + '%';
+      }
+      return rate;
+    },
+    setOptions() {
+      let _this = this;
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'axis',
+          formatter(params) {
+            let str = '';
+            str += `<div>
+            <p>${params[0].seriesName}：${params[0].value}</p>
+            <p>${params[1].seriesName}：${params[1].value}</p>
+            <p>报告转化率：${_this.getReportRate(params)}</p>
+            </div>`;
+            return str;
+          },
+        },
+        legend: {
+          show: true,
+          // icon: "roundRect",
+          right: '45%',
+          top: '0',
+          itemWidth: 10, // 标签宽度为20px
+          itemHeight: 10,
+        },
+        xAxis: {
+          type: 'category',
+          axisLine: {
+            show: true, // 是否显示坐标轴轴线
+            lineStyle: {
+              color: '#E0E6F1', // 坐标轴线线的颜色
+              type: 'dotted', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
+            },
+          },
+          axisTick: {
+            show: true, // 是否显示坐标轴刻度
+          },
+          axisLabel: { color: '#333333' },
+          boundaryGap: false,
+          data: this.chartData.times,
+        },
+        yAxis: [
+          {
+            name: '打印报告量',
+            type: 'value',
+            // min:0,
+            // minInterval:1,
+            axisLabel: {
+              formatter: val => {
+                if (this.isShowPercentage) {
+                  return val + '%';
+                } else {
+                  return val;
+                }
+              },
+            },
+            splitLine: {
+              show: true,
+              lineStyle: {
+                type: 'dotted',
+                color: '#E0E6F1',
+              },
+            },
+            axisLine: {
+              show: false, // 是否显示坐标轴轴线
+              lineStyle: {
+                color: '#333333', // 坐标轴线线的颜色
+                type: 'dotted', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
+              },
+            },
+            axisTick: {
+              show: false, // 是否显示坐标轴刻度
+            },
+          },
+          {
+            name: '审核报告量',
+            type: 'value',
+            axisLabel: {
+              formatter: val => {
+                return val;
+              },
+            },
+            splitLine: {
+              show: false,
+              lineStyle: {
+                type: 'dotted',
+                color: '#E0E6F1',
+              },
+            },
+            axisLine: {
+              show: false, // 是否显示坐标轴轴线
+              lineStyle: {
+                color: '#333333', // 坐标轴线线的颜色
+                type: 'dotted', // 坐标轴线线的类型（'solid'，实线类型；'dashed'，虚线类型；'dotted',点状类型）
+              },
+            },
+            axisTick: {
+              show: false, // 是否显示坐标轴刻度
+            },
+          },
+        ],
+        grid: {
+          left: '32px',
+          right: '32px',
+          top: '10%',
+          bottom: '15px',
+          containLabel: true,
+        },
+        dataZoom: [
+          {
+            type: 'inside', //详细配置可见echarts官网
+            zoomLock: true,
+          },
+        ],
+        series: [
+          {
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(2, 152, 250, 0.6)', // 100% 处的颜色
+                  },
+
+                  {
+                    offset: 1,
+                    color: '#FFFFFF', //   0% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: this.chartData.datas,
+            type: 'line',
+            name: '打印报告量',
+            smooth: false,
+            itemStyle: {
+              normal: {
+                color: '#0298FA', //改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(2, 152, 250, 0.8)', //改变折线颜色
+                },
+              },
+            },
+          },
+          {
+            areaStyle: {
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(240, 190, 76, 0.6)', // 100% 处的颜色
+                  },
+
+                  {
+                    offset: 1,
+                    color: '#FFFFFF', //   0% 处的颜色
+                  },
+                ],
+                global: false, // 缺省为 false
+              },
+            },
+            data: this.chartData.auditDatas,
+            type: 'line',
+            name: '审核报告量',
+            smooth: false,
+            yAxisIndex: 1,
+            itemStyle: {
+              normal: {
+                color: '#F0BE4C', //改变折线点的颜色
+                lineStyle: {
+                  color: 'rgba(240, 190, 76, 0.8)', //改变折线颜色
+                  width: 3,
+                },
+              },
+            },
+          },
+        ],
+      });
+      this.$nextTick(() => {
+        _this.chart.resize();
+      });
+      window.addEventListener('resize', function () {
+        _this.chart.resize();
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.line-box {
+  height: 350px;
+  position: relative;
+  .el-icon-question {
+    position: absolute;
+    left: 55%;
+    top: 0;
+    color: #666;
+  }
+}
+</style>