1

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

@@ -83,6 +83,12 @@
           },
           tooltip: {
             trigger: "axis",
+            axisPointer: {
+              type: 'cross',
+              crossStyle: {
+                color: '#999'
+              }
+            },
             formatter(params) {
               console.log(params)
               let str = params[0].name + '<br />'
@@ -94,7 +100,7 @@
                   str += `${item.marker}${item.seriesName}: ${item.data}%<br />`
                 }
               })
-              return "<div style='color:#fff'>"+str+"</div>"
+              return "<div style='color:#fff'>" + str + "</div>"
             }
           },
           legend: {

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

@@ -1,148 +1,149 @@
-<template>
-  <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",
-    },
-    width: {
-      type: String,
-      default: "100%",
-    },
-    height: {
-      type: String,
-      default: "300px",
-    },
-    chartsTwoValue: {
-      type: String,
-      default: "1",
-    },
-    dataType: {
-      type: String,
-      default: "1",
-    },
-  },
-  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: {
-    initChart(xAxisData, seriesData1, seriesData2, seriesData3) {
-      const myChart = this.$echarts.init(
-        document.getElementById("gzbx_chart2")
-      );
-      myChart.setOption({
-        title: {
-          text: "",
-        },
-        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: ["总量", "完成量", "完成率"],
-        },
-        grid: {
-          left: "3%",
-          right: "4%",
-          bottom: "3%",
-          containLabel: true,
-        },
-        toolbox: {
-          feature: {
-            saveAsImage: {},
-          },
-        },
-        xAxis: {
-          type: "category",
-          boundaryGap: false,
-          data: xAxisData,
-        },
-        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,
-          },
-        ],
-      });
-    },
-  },
-};
+<template>
+  <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",
+      },
+      width: {
+        type: String,
+        default: "100%",
+      },
+      height: {
+        type: String,
+        default: "300px",
+      },
+      chartsTwoValue: {
+        type: String,
+        default: "1",
+      },
+      dataType: {
+        type: String,
+        default: "1",
+      },
+    },
+    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: {
+      initChart(xAxisData, seriesData1, seriesData2, seriesData3) {
+        const myChart = this.$echarts.init(
+          document.getElementById("gzbx_chart2")
+        );
+        myChart.setOption({
+          title: {
+            text: "",
+          },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: { 
+              type: 'cross',
              crossStyle: {
                 color: '#999'
+              }
+            },
+            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: ["总量", "完成量", "完成率"],
+          },
+          grid: {
+            left: "3%",
+            right: "4%",
+            bottom: "3%",
+            containLabel: true,
+          },
+          toolbox: {
+            feature: {
+              saveAsImage: {},
+            },
+          },
+          xAxis: {
+            type: "category",
+            boundaryGap: false,
+            data: xAxisData,
+          },
+          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,
+            },
+          ],
+        });
+      },
+    },
+  };
 </script>