问题修改

src/views/SandTable/SandTable.vue

@@ -716,7 +716,7 @@
                         res.forEach(it =>{
                             let obj = {
                                 name: it.typeName,
-                                value: modelIds === "WT2000D121H85" ? that.warnPC : that.warnPC2 ? it.total : it.totalSeconds
+                                value: modelIds === "WT2000D121H85" ? that.warnPC ? it.total : it.totalSeconds : that.warnPC2 ? it.total : it.totalSeconds
                             }
                             result.push(obj)
                         })
@@ -753,7 +753,7 @@
                         res.data.forEach(it =>{
                             let obj = {
                                 name: it.name,
-                                value: modelIds === "WT2000D121H85" ? that.warnPC : that.warnPC2 ? it.times : it.hours
+                                value: modelIds === "WT2000D121H85" ? that.warnPC ? it.times : it.hours : that.warnPC2 ? it.times : it.hours
                             }
                             result.push(obj)
                         })

src/views/SandTable/component/radar-line-chart.vue

@@ -1,155 +1,166 @@
 <template>
-    <div class="chart" :id="id"></div>
+  <div class="chart" :id="id"></div>
 </template>
 
 <script>
-    import util from "@/helper/util.js";
-    import partten from "@/helper/partten.js";
-    import * as echarts from "echarts";
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
 
-    export default {
-        name: "radar-pie",
-        componentName: "radar-pie",
-        props: {
-            width: {
-                type: String,
-                default: "100%",
+export default {
+  name: "radar-pie",
+  componentName: "radar-pie",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "18.519vh",
+    },
+    title: {
+      type: String,
+      default: "title",
+    },
+    xAxis: {
+      type: Array,
+      default: () => [],
+    },
+    series: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {},
+  methods: {
+    initChart() {
+      let option = {
+        title: {
+          text: "故障次数时长",
+          left: "5px",
+          top: "5px",
+          textStyle: {
+            fontSize: "16",
+            fontWeight: 400,
+            color: "#fff",
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          show: true,
+        },
+        color: ["#7981AF", "#1C99FF", "#E57F25", "#f25656"],
+        legend: {
+          right: "25",
+          top: "5",
+          itemWidth: 5,
+          itemHeight: 5,
+          data: ["故障次数", "故障时长"],
+          textStyle: {
+            color: "#fff",
+          },
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          data: this.xAxis,
+          axisLine: {
+            lineStyle: {
+              color: "#fff", // 修改为需要的颜色
             },
-            height: {
-                type: String,
-                default: "18.519vh",
+          },
+        },
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              lineStyle: {
+                color: "#ccc",
+                type: "dashed", // 修改为虚线
+                opacity: 0.2,
+              },
             },
-            title: {
-                type: String,
-                default: "title",
+            name: "单位：次",
+            axisLine: {
+              lineStyle: {
+                color: "#fff",
+              },
             },
-            xAxis: {
-                type: Array,
-                default: () => []
+            axisLabel: {
+              formatter(value) {
+                return parseFloat(value.toFixed(1));
+              },
             },
-            series: {
-                type: Array,
-                default: () => []
-            }
-        },
-        data() {
-            return {
-                id: "",
-                chart: null,
-            };
-        },
-        computed: {},
-        methods: {
-            initChart() {
-                let option = {
-                    title: {
-                        text: "故障次数时长",
-                        left: "5px",
-                        top: "5px",
-                        textStyle: {
-                            fontSize: "16",
-                            fontWeight: 400,
-                            color: "#fff",
-                        },
-                    },
-                    tooltip: {
-                    trigger: "axis",
-                    },
-                    color: ["#7981AF", "#1C99FF", "#E57F25", "#f25656"],
-                    legend: {
-                        right: "25",
-                        top: "5",
-                        itemWidth: 5,
-                        itemHeight: 5,
-                        data: ["故障次数", "故障时长"],
-                        textStyle: {
-                            color: "#fff",
-                        },
-                    },
-                    xAxis: {
-                        type: "category",
-                        boundaryGap: false,
-                        data: this.xAxis,
-                        axisLine: {
-                            lineStyle: {
-                            color: "#fff", // 修改为需要的颜色
-                            },
-                        },
-                    },
-                    yAxis: [
-                    {
-                        type: "value",
-                        splitLine: {
-                        lineStyle: {
-                            color: "#ccc",
-                            type: "dashed", // 修改为虚线
-                            opacity: 0.2,
-                        },
-                        },
-                        name: "单位：次",
-                        axisLine: {
-                        lineStyle: {
-                            color: "#fff",
-                        },
-                        },
-                        axisLabel: {
-                        formatter(value) {
-                            return parseFloat(value.toFixed(1));
-                        },
-                        },
-                    },
-                    {
-                        type: "value",
-                        splitLine: {
-                        lineStyle: {
-                            color: "#ccc",
-                            type: "dashed", // 修改为虚线
-                            opacity: 0.2,
-                        },
-                        },
-                        name: "单位：时长",
-                        axisLine: {
-                        lineStyle: {
-                            color: "#fff",
-                        },
-                        },
-                        axisLabel: {
-                        formatter(value) {
-                            return parseFloat(value.toFixed(1));
-                        },
-                        },
-                    },
-                    ],
-                    series: this.series
-                };
-
-                this.chart.setOption(option);
+          },
+          {
+            type: "value",
+            splitLine: {
+              lineStyle: {
+                color: "#ccc",
+                type: "dashed", // 修改为虚线
+                opacity: 0.2,
+              },
             },
-        },
-        created() {
-            this.id = "pie-chart-" + util.newGUID();
-        },
-        mounted() {
-            this.$el.style.width = this.width;
-            this.$el.style.height = this.height;
-            this.chart = echarts.init(this.$el);
-            this.initChart();
-        },
-        updated() {
-            this.initChart();
-        },
-        watch: {
-            "$store.state.themeName"() {
-                this.initChart();
+            name: "单位：时长",
+            axisLine: {
+              lineStyle: {
+                color: "#fff",
+              },
             },
-        },
-    };
+            axisLabel: {
+              formatter(value) {
+                return parseFloat(value.toFixed(1));
+              },
+            },
+          },
+        ],
+        series: this.series,
+      };
+      let dom = document.getElementById(this.id);
+      dom && dom.removeAttribute("_echarts_instance_");
+
+      let myChart = this.$echarts.init(dom);
+
+      myChart.setOption(option);
+
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+
+      //   this.chart.setOption(option);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.chart = echarts.init(this.$el);
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
+  watch: {
+    "$store.state.themeName"() {
+      this.initChart();
+    },
+  },
+};
 </script>
 
 <style lang="less">
-    .chart {
-        width: 100%;
-        height: 100%;
-        display: inline-block;
-    }
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
 </style>