报表

CallCenterWeb.UI/RMYY/src/views/leadConcernNew/cpns/LineChart.vue

@@ -1,167 +1,192 @@
 <template>
-  <div
-    id="gzbx_chart2"
-    :class="className"
-    :style="{ height: height, width: width }"
-  />
+  <div id="gzbx_chart2" :class="className" :style="{ height: height, width: width }" />
 </template>
 <script>
-import { mapDeptRepairReport } from "@/api/leadConcern/leadConcern";
-// import getdate from "@/utils/getdate";
-export default {
-  props: {
-    className: {
-      type: String,
-      default: "chart",
+  import {
+    mapDeptRepairReport
+  } from "@/api/leadConcern/leadConcern";
+  // import getdate from "@/utils/getdate";
+  export default {
+    props: {
+      className: {
+        type: String,
+        default: "chart",
+      },
+      width: {
+        type: String,
+        default: "100%",
+      },
+      height: {
+        type: String,
+        default: "300px",
+      },
+      chartsTwoValue: {
+        type: String,
+        default: "1",
+      },
+      dataType: {
+        type: String,
+        default: "1",
+      },
     },
-    width: {
-      type: String,
-      default: "100%",
+    watch: {
+      chartsTwoValue: function() {
+        this.statisticsTopFiveReport();
+      },
+      dataType: function() {
+        this.statisticsTopFiveReport();
+      },
     },
-    height: {
-      type: String,
-      default: "300px",
+    data() {
+      return {
+        gzbxData: [],
+        chart: null,
+        echartsData: [],
+        userNameData: [],
+        committedData: [],
+        uncommittedData: [],
+      };
     },
-    chartsTwoValue: {
-      type: String,
-      default: "1",
+    mounted() {
+      // this.getDeptRepairReport();
+      // this.initChart();
     },
-    dataType: {
-      type: String,
-      default: "1",
+    beforeDestroy() {
+      if (!this.chart) {
+        return;
+      }
+      this.chart.dispose();
+      this.chart = null;
     },
-  },
-  watch: {
-    chartsTwoValue: function () {
-      this.statisticsTopFiveReport();
-    },
-    dataType: function () {
-      this.statisticsTopFiveReport();
-    },
-  },
-  data() {
-    return {
-      gzbxData: [],
-      chart: null,
-      echartsData: [],
-      userNameData: [],
-      committedData: [],
-      uncommittedData: [],
-    };
-  },
-  mounted() {
-    // this.getDeptRepairReport();
-    // this.initChart();
-  },
-  beforeDestroy() {
-    if (!this.chart) {
-      return;
-    }
-    this.chart.dispose();
-    this.chart = null;
-  },
-  methods: {
-    getsearchParam(startdata, enddata, users) {
-      this.startdata = startdata;
-      this.enddata = enddata;
-      this.users = users;
-    },
-    initChart(
-      xAxisData,
-      seriesData1,
-      seriesData2,
-      seriesData3,
-      seriesData4,
-      seriesData5,
-      seriesData6,
-      seriesData7
-    ) {
-      const myChart = this.$echarts.init(
-        document.getElementById("gzbx_chart2")
-      );
-      myChart.setOption({
-        title: {
-          text: "",
-        },
-        tooltip: {
-          trigger: "axis",
-        },
-        legend: {
-          data: [
-            "总量",
-            "完成量",
-            "完成率",
-            "超时量",
-            "超时率",
-            "满意量",
-            "满意率",
-          ],
-        },
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true,
-        },
-        toolbox: {
-          feature: {
-            saveAsImage: {},
+    methods: {
+      getsearchParam(startdata, enddata, users) {
+        this.startdata = startdata;
+        this.enddata = enddata;
+        this.users = users;
+      },
+      initChart(
+        xAxisData,
+        seriesData1,
+        seriesData2,
+        seriesData3,
+        seriesData4,
+        seriesData5,
+        seriesData6,
+        seriesData7
+      ) {
+        const myChart = this.$echarts.init(
+          document.getElementById("gzbx_chart2")
+        );
+        myChart.setOption({
+          title: {
+            text: "",
           },
-        },
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: xAxisData,
-        },
-        yAxis: {
-          type: "value",
-        },
-        series: [
-          {
-            name: "总量",
-            type: "line",
-            stack: "Total",
-            data: seriesData1,
+          tooltip: {
+            trigger: "axis",
+            formatter(params) {
+              console.log(params)
+              let str = params[0].name + '<br />'
+              params.forEach(item => {
+                if (item.seriesName === '总量' || item.seriesName === '完成量' || item.seriesName === '超时量' || item
+                  .seriesName === '满意量') {
+                  str += `${item.marker}${item.seriesName}: ${item.data}<br />`
+                } else {
+                  str += `${item.marker}${item.seriesName}: ${item.data}%<br />`
+                }
+              })
+              return "<div style='color:#fff'>"+str+"</div>"
+            }
           },
-          {
-            name: "完成量",
-            type: "line",
-            stack: "Total",
-            data: seriesData2,
+          legend: {
+            data: [
+              "总量",
+              "完成量",
+              "完成率",
+              "超时量",
+              "超时率",
+              "满意量",
+              "满意率",
+            ],
           },
-          {
-            name: "完成率",
-            type: "line",
-            stack: "Total",
-            data: seriesData3,
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
           },
-          {
-            name: "超时量",
-            type: "line",
-            stack: "Total",
-            data: seriesData4,
+          toolbox: {
+            feature: {
+              saveAsImage: {},
+            },
           },
-          {
-            name: "超时率",
-            type: "line",
-            stack: "Total",
-            data: seriesData2,
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xAxisData,
           },
-          {
-            name: "满意量",
-            type: "line",
-            stack: "Total",
-            data: seriesData3,
-          },
-          {
-            name: "满意率",
-            type: "line",
-            stack: "Total",
-            data: seriesData3,
-          },
-        ],
-      });
+          yAxis: [{
+              type: 'value',
+              name: '数量',
+              min: 0,
+            },
+            {
+              type: 'value',
+              name: '百分比',
+              min: 0,
+              // max: 100,
+              axisLabel: {
+                formatter: '{value} %'
+              }
+            }
+          ],
+          // yAxis: {
+          //   type: "value",
+          // },
+          series: [{
+              name: "总量",
+              type: "line",
+              yAxisIndex: 0,
+              data: seriesData1,
+            },
+            {
+              name: "完成量",
+              type: "line",
+              yAxisIndex: 0,
+              data: seriesData2,
+            },
+            {
+              name: "完成率",
+              type: "line",
+              yAxisIndex: 1,
+              data: seriesData3,
+            },
+            {
+              name: "超时量",
+              type: "line",
+              yAxisIndex: 0,
+              data: seriesData4,
+            },
+            {
+              name: "超时率",
+              type: "line",
+              yAxisIndex: 1,
+              data: seriesData5,
+            },
+            {
+              name: "满意量",
+              type: "line",
+              yAxisIndex: 0,
+              data: seriesData6,
+            },
+            {
+              name: "满意率",
+              type: "line",
+              yAxisIndex: 1,
+              data: seriesData7,
+            },
+          ],
+        });
+      },
     },
-  },
-};
+  };
 </script>

CallCenterWeb.UI/RMYY/src/views/leadConcernNew/officeWorkReport/cpns/LineChart.vue

@@ -71,6 +71,18 @@ export default {
         },
         tooltip: {
           trigger: "axis",
+          formatter(params) {
+            console.log(params)
+            let str = params[0].name + '<br />'
+            params.forEach(item => {
+              if (item.seriesName === '总量' || item.seriesName === '完成量') {
+                str += `${item.marker}${item.seriesName}: ${item.data}<br />`
+              } else {
+                str += `${item.marker}${item.seriesName}: ${item.data}%<br />`
+              }
+            })
+            return "<div style='color:#fff'>"+str+"</div>"
+          }
         },
         legend: {
           data: ["总量", "完成量", "完成率"],
@@ -91,26 +103,41 @@ export default {
           boundaryGap: false,
           data: xAxisData,
         },
-        yAxis: {
-          type: "value",
-        },
+        yAxis: [{
+            type: 'value',
+            name: '数量',
+            min: 0,
+          },
+          {
+            type: 'value',
+            name: '百分比',
+            min: 0,
+            // max: 100,
+            axisLabel: {
+              formatter: '{value} %'
+            }
+          }
+        ],
+        // yAxis: {
+        //   type: "value",
+        // },
         series: [
           {
             name: "总量",
             type: "line",
-            stack: "Total",
+            yAxisIndex: 0,
             data: seriesData1,
           },
           {
             name: "完成量",
             type: "line",
-            stack: "Total",
+            yAxisIndex: 0,
             data: seriesData2,
           },
           {
             name: "完成率",
             type: "line",
-            stack: "Total",
+            yAxisIndex: 1,
             data: seriesData3,
           },
         ],