ylyx-cli 1.0.0

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

@@ -0,0 +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>