基础矩阵白色版本样式完成

src/assets/styles/theme/light/jsc/lightmatrix1.less

@@ -1,27 +1,145 @@
 @import '../setting.less';
 
 #appBody.light {
+
 	// 基础矩阵
-	.panel-body {
-		background: @white;
-		transition: @transition;
+	.el-scrollbar__wrap {
+		background: transparent;
 	}
 
-	.card-panel .card-left .tag {
-		color: @black;
-	}
+	.light-matrix {
 
-	.light-matrix .panel {
-		background-color: gainsboro;
-	}
+		.panel {
+			background   : #fff;
+			border-radius: @borderRaduis;
+			border-color : #fff;
+			transition   : @transition;
 
-	.light-matrix .panel-box .panel-title .panel-title-name {
-		font-size: 1.296vh;
-		color: @deepblue;
-		font-weight: bold;
-	}
+			.item.write {
+				color      : #000;
+				font-weight: 700;
+				transition : @transition;
+			}
+
+			.item.blue {
+				color      : rgb(53, 64, 164);
+				font-weight: 700;
+				transition : @transition;
+			}
+
+			.item.green,
+			.item.greenv {
+				color      : rgb(0, 179, 54);
+				font-weight: 700;
+				transition : @transition;
+			}
+
+			.item.pink {
+				color      : rgb(197, 50, 200);
+				font-weight: 700;
+				transition : @transition;
+			}
+
+			.item.red {
+				color      : rgb(187, 52, 57);
+				font-weight: 700;
+				transition : @transition;
+			}
+
+			.item.orange {
+				color      : rgb(221, 109, 9);
+				font-weight: 700;
+				transition : @transition;
+			}
+
+			.item.write {
+				color      : rgb(2, 2, 2);
+				font-weight: 700;
+				transition : @transition;
+			}
+
+			.item.gray {
+				color      : rgb(77, 85, 87);
+				font-weight: 700;
+				transition : @transition;
+			}
+		}
+
+		.panel-body {
+			background: @white;
+		}
 
-	.svg-icon.svg-icon-green svg use {
-		fill: @deepblue;
+		.card-panel .card-left .tag {
+			color: @black;
+		}
+
+		.panel-box>div {
+			padding      : 4px 0 8px 0;
+			background   : #fff;
+			margin-bottom: 4px;
+			border-radius: 8px;
+			overflow     : hidden;
+		}
+
+		.panel-box .panel-title .panel-title-name {
+			font-size  : 1.296vh;
+			color      : rgb(5, 187, 76);
+			font-weight: bold;
+			background : #fff;
+		}
+
+		.panel-box .sub-title-item {
+			.sub-title {
+				color     : #000;
+				transition: @transition;
+			}
+
+			.sub-count.write {
+				color      : rgb(0, 0, 0);
+				font-weight: 700;
+				transition : @transition;
+			}
+
+			.sub-count.green {
+				color      : rgb(5, 187, 76);
+				font-weight: 700;
+				transition : @transition;
+			}
+
+			.sub-count.blue {
+				color      : rgb(53, 64, 164);
+				font-weight: 700;
+				transition : @transition;
+			}
+
+			.sub-count.purple {
+				color      : rgb(202, 68, 205);
+				font-weight: 700;
+				transition : @transition;
+			}
+
+			.sub-count.red {
+				color      : rgb(187, 52, 57);
+				font-weight: 700;
+				transition : @transition;
+			}
+
+			.sub-count.orange {
+				color      : rgb(221, 109, 9);
+				font-weight: 700;
+				transition : @transition;
+			}
+
+			.sub-count.gray {
+				color     : rgb(24, 24, 24);
+				transition: @transition;
+			}
+		}
+
+		.panel-box .panel-title .svg-icon.svg-icon-green svg use {
+			fill      : rgb(5, 187, 76);
+			transition: @transition;
+		}
 	}
-}
+
+}

src/components/chart/scatter/current-scatter-chart.vue

@@ -0,0 +1,341 @@
+<template>
+  <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";
+
+export default {
+  props: {
+    // 图表宽度
+    width: {
+      type: String,
+      default: "100%",
+    },
+    // 图表高度
+    height: {
+      type: String,
+      default: "350px",
+    },
+    // 图表主标题
+    chartTitle: {
+      type: String,
+      default: "自定义图表组件",
+    },
+    // X 轴配置项
+    xAxisData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // Y 轴配置项
+    yAxisData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 图表核心数据
+    seriesData: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    // 是否显示图表图例
+    showLegend: {
+      type: Boolean,
+      default: true,
+    },
+    // 是否默认采用笔刷模式
+    brushSelected: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      color: [
+        "#05bb4c",
+        "#4b55ae",
+        "#fa8c16",
+        "#f8de5b",
+        "#1a93cf",
+        "#c531c7",
+        "#bd3338",
+      ],
+    };
+  },
+  methods: {
+    resize() {},
+    initChart() {
+      const that = this;
+      let myChart = echarts.init(document.getElementById(this.id));
+
+      //指定图表的配置项和数据
+      const option = {
+        //标题
+        title: {
+          text: that.chartTitle,
+          textStyle: {
+            fontSize: util.vh(16),
+            color: that.$store.state.themeName === "dark" ? "#fff" : "#000",
+          },
+        },
+        backgroundColor:
+          that.$store.state.themeName === "dark"
+            ? "rgba(0,0,0,0.4)"
+            : "rgba(255,255,255,0.5)",
+        //工具箱
+        toolbox: {
+          show: true,
+          x: "right",
+          position: [10, 10],
+          backgroundColor:
+            that.$store.state.themeName === "dark"
+              ? "rgba(0,0,0,0.4)"
+              : "rgba(255,255,255,0.5)",
+          borderColor:
+            that.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
+          textStyle: {
+            fontSize: util.vh(16),
+            color: that.$store.state.themeName === "dark" ? "#fff" : "#000",
+          },
+          iconStyle: {
+            borderColor:
+              that.$store.state.themeName === "dark" ? "#fff" : "#000",
+          },
+          emphasis: {
+            iconStyle: {
+              borderColor:
+                that.$store.state.themeName === "dark" ? "#fff" : "#000",
+            },
+          },
+          // feature: {
+          //   dataZoom: {
+          //     yAxisIndex: "none",
+          //   },
+          //   dataView: { readOnly: false },
+          //   magicType: { type: ["line", "bar"] },
+          //   restore: {},
+          //   saveAsImage: {},
+          // },
+        },
+        tooltip: {
+          trigger: "item",
+          axisPointer: {
+            type: "cross",
+          },
+          backgroundColor:
+            that.$store.state.themeName === "dark"
+              ? "rgba(0,0,0,0.4)"
+              : "rgba(255,255,255,0.5)",
+          borderColor:
+            that.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
+          textStyle: {
+            fontSize: util.vh(16),
+            color: that.$store.state.themeName === "dark" ? "#fff" : "#000",
+          },
+          formatter(params) {
+            return params.name
+              ? `${params.seriesName}<br />风速：${params.name}米/s<br />功率：${params.value}KW`
+              : `${params.seriesName}<br />风速：${params.data[0]}米/s<br />功率：${params.data[1]}KW`;
+          },
+        },
+        brush: {
+          xAxisIndex: "all",
+          yAxisIndex: "all",
+          transformable: true,
+          throttleType: "debounce",
+          throttleDelay: 600,
+          removeOnClick: false,
+          brushType: "polygon",
+          brushMode: "multiple",
+          brushStyle: {
+            borderWidth: 1,
+            color: "rgba(255,36,36,0.2)",
+            borderColor: "#ff2424",
+          },
+          // outOfBrush: {
+          //   colorAlpha: 0.5,
+          // },
+        },
+        dataZoom: [
+          {
+            type: "inside", //图表下方的伸缩条
+            show: true, //是否显示
+            realtime: true, //拖动时，是否实时更新系列的视图
+            start: 0, //伸缩条开始位置（1-100），可以随时更改
+            end: 100, //伸缩条结束位置（1-100），可以随时更改
+          },
+          {
+            type: "slider", //图表下方的伸缩条
+            show: true, //是否显示
+            realtime: true, //拖动时，是否实时更新系列的视图
+            start: 0, //伸缩条开始位置（1-100），可以随时更改
+            end: 100, //伸缩条结束位置（1-100），可以随时更改
+          },
+        ],
+        textStyle: {
+          fontSize: util.vh(16),
+          color: that.$store.state.themeName === "dark" ? "#fff" : "#000",
+        },
+        //图例-每一条数据的名字
+        legend: {
+          show: that.showLegend,
+          data: ["风速功率", "实际功率", "最优功率"],
+          right: "120",
+          top: "5",
+          icon: "circle",
+          itemWidth: 6,
+          inactiveColor:
+            that.$store.state.themeName === "dark"
+              ? partten.getColor("gray")
+              : "#000",
+          textStyle: {
+            color:
+              that.$store.state.themeName === "dark"
+                ? partten.getColor("grayl")
+                : "#000",
+            fontSize: 12,
+          },
+        },
+        grid: {
+          top: 32,
+          left: 40,
+          right: 40,
+          bottom: 24,
+        },
+        //x轴
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            data: that.xAxisData || [
+              "0",
+              "1",
+              "2",
+              "3",
+              "4",
+              "5",
+              "6",
+              "7",
+              "8",
+              "9",
+              "10",
+              "11",
+              "12",
+              "13",
+              "14",
+              "15",
+              "16",
+              "17",
+              "18",
+              "19",
+              "20",
+              "21",
+              "22",
+              "23",
+              "24",
+              "25",
+            ],
+            min: 0,
+            axisLabel: {
+              formatter: "{value}",
+              fontSize: util.vh(14),
+            },
+            textStyle: {
+              color:
+                this.$store.state.themeName === "dark"
+                  ? partten.getColor("gray")
+                  : "#000",
+            },
+          },
+          {
+            // name: this.xTitle,
+            show: false,
+            type: "value",
+            boundaryGap: false,
+            min: that?.xAxisData[0],
+            max: that?.xAxisData[that?.xAxisData?.length - 1],
+            scale: true,
+            axisLabel: {
+              formatter: "{value}",
+            },
+            splitLine: {
+              show: false,
+            },
+          },
+        ],
+        //y轴没有显式设置，根据值自动生成y轴
+        yAxis: {
+          splitLine: { show: false },
+        },
+        //数据-data是最终要显示的数据
+        series: that.seriesData,
+      };
+
+      that.resize = function () {
+        myChart.resize();
+      };
+
+      window.addEventListener("resize", that.resize);
+
+      myChart.setOption(option);
+
+      if (that.brushSelected) {
+        myChart.off("brushSelected");
+        myChart.on("brushSelected", (params) => {
+          that.$emit("getSelected", params.batch || []);
+        });
+        myChart.dispatchAction({
+          type: "takeGlobalCursor",
+          // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
+          key: "brush",
+          brushOption: {
+            // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
+            brushType: "polygon",
+            // 参见 brush 组件的 brushMode。如果不设置，则取 brush 组件的 brushMode 设置。
+            brushMode: "multiple",
+          },
+        });
+      }
+    },
+  },
+  created() {
+    this.id = "chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initChart();
+    });
+  },
+  updated() {
+    let myChart = echarts.init(document.getElementById(this.id));
+    myChart.dispose();
+    this.initChart();
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

src/views/About.vue

@@ -56,7 +56,17 @@
       <!-- <list-bar-chart /> -->
     </template>
     <!-- <cesium /> -->
-    <div id="box" style="width: 1000px; height: 600px"></div>
+    <currentScatterChart
+      width="100%"
+      height="600px"
+      chartTitle="可框选折线散点图"
+      :xAxisData="xAxisData"
+      :yAxisData="{ splitLine: { show: false } }"
+      :seriesData="seriesData"
+      :showLegend="true"
+      :brushSelected="true"
+      @getSelected="getSelected"
+    />
   </div>
 </template>
 
@@ -68,6 +78,7 @@ import clock from "@com/other/clock/index.vue";
 import cesium from "@com/other/cesium/index.vue";
 import * as echarts from "echarts";
 import util from "@/helper/util.js";
+import currentScatterChart from "../components/chart/scatter/current-scatter-chart.vue";
 import partten from "@/helper/partten.js";
 
 // 导入header.vue文件
@@ -76,6 +87,8 @@ export default {
     return {
       show: true,
       tableData: [],
+      xAxisData: [],
+      seriesData: [],
     };
   },
 
@@ -85,6 +98,7 @@ export default {
     FJ,
     clock,
     cesium,
+    currentScatterChart,
   },
 
   created() {
@@ -114,7 +128,94 @@ export default {
         time: "2022-02",
       },
       success(res) {
-        that.initChart(res);
+        let sjgl = [];
+        let zygl = [];
+        let xAxisData = [];
+
+        res.data.lineactual.forEach((ele, index) => {
+          sjgl.push(ele[1]);
+          xAxisData.push(index);
+        });
+
+        res.data.lineoptimal.forEach((ele) => {
+          zygl.push(ele[1]);
+        });
+
+        that.seriesData = [
+          {
+            name: "风速功率",
+            type: "effectScatter",
+            showEffectOn: "emphasis",
+            symbolSize: 5,
+            data: res.data.scatter || [
+              [174.0, 65.6],
+              [175.3, 71.8],
+              [193.5, 80.7],
+              [186.5, 72.6],
+              [187.2, 78.8],
+              [181.5, 74.8],
+              [184.0, 86.4],
+              [184.5, 78.4],
+              [175.0, 62.0],
+              [184.0, 81.6],
+              [180.0, 76.6],
+              [177.8, 83.6],
+              [192.0, 90.0],
+              [176.0, 74.6],
+              [174.0, 71.0],
+              [184.0, 79.6],
+              [192.7, 93.8],
+              [171.5, 70.0],
+              [173.0, 72.4],
+              [176.0, 85.9],
+              [176.0, 78.8],
+              [180.5, 77.8],
+            ],
+            xAxisIndex: 1,
+          },
+          {
+            name: "实际功率",
+            type: "line",
+            symbol: "circle", //设定为实心点
+            symbolSize: 0, //设定实心点的大小
+            smooth: true, //这个是把线变成曲线
+            data: sjgl || [
+              10, 20, 30, 40, 30, 20, 50, 80, 50, 80, 50, 80, 60, 40, 20, 40,
+              60, 80, 60, 40, 20,
+            ],
+            itemStyle: {
+              normal: {
+                color: "#05bb4c",
+                lineStyle: {
+                  color: "#05bb4c",
+                },
+              },
+            },
+            xAxisIndex: 0,
+          },
+          {
+            name: "最优功率",
+            type: "line",
+            symbol: "circle", //设定为实心点
+            symbolSize: 0, //设定实心点的大小
+            smooth: true, //这个是把线变成曲线
+            data: zygl || [
+              0, 10, 20, 30, 40, 50, 60, 70, 80, 80, 80, 80, 90, 90, 90, 95, 95,
+              100, 100, 100, 100,
+            ],
+            itemStyle: {
+              normal: {
+                color: "#f8de5b",
+                lineStyle: {
+                  color: "#f8de5b",
+                },
+              },
+            },
+            xAxisIndex: 0,
+          },
+        ];
+
+        that.xAxisData = xAxisData;
       },
     });
     return;
@@ -158,354 +259,6 @@ export default {
   },
 
   methods: {
-    initChart(res) {
-      let myChart = echarts.init(document.getElementById("box"));
-
-      let sjgl = [];
-      let zygl = [];
-      let xAxisData = [];
-
-      res.data.lineactual.forEach((ele, index) => {
-        sjgl.push(ele[1]);
-        xAxisData.push(index);
-      });
-
-      res.data.lineoptimal.forEach((ele) => {
-        zygl.push(ele[1]);
-      });
-
-      const series = [
-        {
-          name: "风速功率",
-          type: "effectScatter",
-          showEffectOn: "emphasis",
-          symbolSize: 5,
-          data: res.data.scatter || [
-            [174.0, 65.6],
-            [175.3, 71.8],
-            [193.5, 80.7],
-            [186.5, 72.6],
-            [187.2, 78.8],
-            [181.5, 74.8],
-            [184.0, 86.4],
-            [184.5, 78.4],
-            [175.0, 62.0],
-            [184.0, 81.6],
-            [180.0, 76.6],
-            [177.8, 83.6],
-            [192.0, 90.0],
-            [176.0, 74.6],
-            [174.0, 71.0],
-            [184.0, 79.6],
-            [192.7, 93.8],
-            [171.5, 70.0],
-            [173.0, 72.4],
-            [176.0, 85.9],
-            [176.0, 78.8],
-            [180.5, 77.8],
-          ],
-          xAxisIndex: 1,
-        },
-        {
-          name: "实际功率",
-          type: "line",
-          smooth: true, //这个是把线变成曲线
-          data: sjgl || [
-            10, 20, 30, 40, 30, 20, 50, 80, 50, 80, 50, 80, 60, 40, 20, 40, 60,
-            80, 60, 40, 20,
-          ],
-          itemStyle: {
-            normal: {
-              color: "#05bb4c",
-              lineStyle: {
-                color: "#05bb4c",
-              },
-            },
-          },
-          xAxisIndex: 0,
-        },
-        {
-          name: "最优功率",
-          type: "line",
-          smooth: true, //这个是把线变成曲线
-          data: zygl || [
-            0, 10, 20, 30, 40, 50, 60, 70, 80, 80, 80, 80, 90, 90, 90, 95, 95,
-            100, 100, 100, 100,
-          ],
-          itemStyle: {
-            normal: {
-              color: "#f8de5b",
-              lineStyle: {
-                color: "#f8de5b",
-              },
-            },
-          },
-          xAxisIndex: 0,
-        },
-      ];
-      //指定图表的配置项和数据
-      var option = {
-        //标题
-        title: {
-          text: "折线散点图",
-          textStyle: {
-            fontSize: util.vh(16),
-            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
-          },
-        },
-        backgroundColor:
-          this.$store.state.themeName === "dark"
-            ? "rgba(0,0,0,0.4)"
-            : "rgba(255,255,255,0.5)",
-        //工具箱
-        toolbox: {
-          show: true,
-          x: "right",
-          position: [10, 10],
-          backgroundColor:
-            this.$store.state.themeName === "dark"
-              ? "rgba(0,0,0,0.4)"
-              : "rgba(255,255,255,0.5)",
-          borderColor:
-            this.$store.state.themeName === "dark"
-              ? partten.getColor("gray")
-              : "#000",
-          textStyle: {
-            fontSize: util.vh(16),
-            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
-          },
-          iconStyle: {
-            borderColor:
-              this.$store.state.themeName === "dark" ? "#fff" : "#000",
-          },
-          emphasis: {
-            iconStyle: {
-              borderColor:
-                this.$store.state.themeName === "dark" ? "#fff" : "#000",
-            },
-          },
-          // feature: {
-          //   dataZoom: {
-          //     yAxisIndex: "none",
-          //   },
-          //   dataView: { readOnly: false },
-          //   magicType: { type: ["line", "bar"] },
-          //   restore: {},
-          //   saveAsImage: {},
-          // },
-        },
-        tooltip: {
-          trigger: "item",
-          axisPointer: {
-            type: "cross",
-          },
-          backgroundColor:
-            this.$store.state.themeName === "dark"
-              ? "rgba(0,0,0,0.4)"
-              : "rgba(255,255,255,0.5)",
-          borderColor:
-            this.$store.state.themeName === "dark"
-              ? partten.getColor("gray")
-              : "#000",
-          textStyle: {
-            fontSize: util.vh(16),
-            color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
-          },
-          formatter(params) {
-            return params.name
-              ? `${params.seriesName}<br />风速：${params.name}米/s<br />功率：${params.value}KW`
-              : `${params.seriesName}<br />风速：${params.data[0]}米/s<br />功率：${params.data[1]}KW`;
-          },
-        },
-        brush: {
-          xAxisIndex: "all",
-          yAxisIndex: "all",
-          transformable: true,
-          throttleType: "debounce",
-          throttleDelay: 600,
-          removeOnClick: false,
-          brushType: "polygon",
-          brushMode: "multiple",
-          brushStyle: {
-            borderWidth: 1,
-            color: "rgba(255,36,36,0.2)",
-            borderColor: "#ff2424",
-          },
-          // outOfBrush: {
-          //   colorAlpha: 0.5,
-          // },
-        },
-        dataZoom: [
-          {
-            type: "inside", //图表下方的伸缩条
-            show: true, //是否显示
-            realtime: true, //拖动时，是否实时更新系列的视图
-            start: 0, //伸缩条开始位置（1-100），可以随时更改
-            end: 100, //伸缩条结束位置（1-100），可以随时更改
-          },
-          {
-            type: "slider", //图表下方的伸缩条
-            show: true, //是否显示
-            realtime: true, //拖动时，是否实时更新系列的视图
-            start: 0, //伸缩条开始位置（1-100），可以随时更改
-            end: 100, //伸缩条结束位置（1-100），可以随时更改
-          },
-        ],
-        textStyle: {
-          fontSize: util.vh(16),
-          color: this.$store.state.themeName === "dark" ? "#fff" : "#000",
-        },
-        //图例-每一条数据的名字
-        legend: {
-          show: true,
-          data: ["风速功率", "实际功率", "最优功率"],
-          right: "120",
-          top: "5",
-          icon: "circle",
-          itemWidth: 6,
-          inactiveColor:
-            this.$store.state.themeName === "dark"
-              ? partten.getColor("gray")
-              : "#000",
-          textStyle: {
-            color:
-              this.$store.state.themeName === "dark"
-                ? partten.getColor("grayl")
-                : "#000",
-            fontSize: 12,
-          },
-        },
-        grid: {
-          top: 32,
-          left: 40,
-          right: 40,
-          bottom: 24,
-        },
-        //x轴
-        xAxis: [
-          {
-            type: "category",
-            boundaryGap: false,
-            data: xAxisData || [
-              "0",
-              "1",
-              "2",
-              "3",
-              "4",
-              "5",
-              "6",
-              "7",
-              "8",
-              "9",
-              "10",
-              "11",
-              "12",
-              "13",
-              "14",
-              "15",
-              "16",
-              "17",
-              "18",
-              "19",
-              "20",
-              "21",
-              "22",
-              "23",
-              "24",
-              "25",
-            ],
-            min: 0,
-            axisLabel: {
-              formatter: "{value}",
-              fontSize: util.vh(14),
-            },
-            textStyle: {
-              color:
-                this.$store.state.themeName === "dark"
-                  ? partten.getColor("gray")
-                  : "#000",
-            },
-          },
-          {
-            // name: this.xTitle,
-            show: false,
-            type: "value",
-            boundaryGap: false,
-            min: xAxisData[0],
-            max: xAxisData[xAxisData.length - 1],
-            scale: true,
-            axisLabel: {
-              formatter: "{value}",
-            },
-            splitLine: {
-              show: false,
-            },
-          },
-        ],
-        //y轴没有显式设置，根据值自动生成y轴
-        yAxis: {
-          splitLine: { show: false },
-        },
-        //数据-data是最终要显示的数据
-        series,
-      };
-
-      myChart.off("brushSelected");
-      myChart.on("brushSelected", (params) => {
-        console.log(123123, params);
-        const selected = params.batch[0]?.selected;
-        let selectRes = [];
-        selected?.forEach((pEle) => {
-          if (pEle.dataIndex.length) {
-            let item = {
-              name: pEle.seriesName,
-              data: [],
-            };
-            pEle.dataIndex.forEach((cEle) => {
-              item.data.push(
-                Array.isArray(series[pEle.seriesIndex].data[cEle])
-                  ? series[pEle.seriesIndex].data[cEle][
-                      series[pEle.seriesIndex].data[cEle].length - 1
-                    ]
-                  : series[pEle.seriesIndex].data[cEle]
-              );
-            });
-            selectRes.push(item);
-          }
-        });
-        let altMsg = "选中了";
-        if (selectRes.length) {
-          selectRes.forEach((ele) => {
-            altMsg +=
-              ele.data.length +
-              "条" +
-              ele.name +
-              "：[" +
-              ele.data.toString() +
-              "].";
-          });
-          this.BASE.showMsg({
-            type: "success",
-            msg: altMsg,
-          });
-        }
-      });
-
-      //使用刚刚指定的配置项和数据项显示图表
-      myChart.setOption(option);
-
-      myChart.dispatchAction({
-        type: "takeGlobalCursor",
-        // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。
-        key: "brush",
-        brushOption: {
-          // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。
-          brushType: "polygon",
-          // 参见 brush 组件的 brushMode。如果不设置，则取 brush 组件的 brushMode 设置。
-          brushMode: "multiple",
-        },
-      });
-    },
     showDialog() {
       this.show = true;
     },
@@ -517,6 +270,20 @@ export default {
         return [10, 1];
       }
     },
+
+    getSelected(res) {
+      const seriesIndex = res[0]?.selected[0]?.seriesIndex;
+      const selected = res[0]?.selected[0]?.dataIndex;
+      selected?.forEach((seleIndex, timmerIndex) => {
+        setTimeout(() => {
+          const item = this.seriesData[seriesIndex].data[seleIndex];
+          this.BASE.showMsg({
+            type: "success",
+            msg: `${item[0]}米风速时功率为：${item[1]}KW`,
+          });
+        }, timmerIndex * 50);
+      });
+    },
   },
 };
 </script>

src/views/LightMatrix1/LightMatrix1.vue

@@ -418,9 +418,7 @@ export default {
       let fjmap = this.BASE.deepCopy(this.sourceMap.fjmap);
 
       fjmap.forEach((pEle) => {
-        console.log("pele:", pEle);
         pEle.forEach((cEle) => {
-          console.log("cele:", cEle);
           cEle.isShow = true;
           if (!this.fillCategory) {
             cEle.isShow = true;
@@ -449,7 +447,6 @@ export default {
         subUrl: "matrix/matrixPush",
         success(res) {
           if (res) {
-            console.log("resmap:", res);
             let sourceMap = res.data;
             let fjmap = [];
             for (let key in sourceMap) {
@@ -465,7 +462,6 @@ export default {
               }
             }
             that.sourceMap = sourceMap;
-            console.log("sourceMap:", that.sourceMap);
             if (that.fillCategory) {
               that.changeShow(that.fillCategory, that.fillFjzt, true);
             }

src/views/windAnalysis/phdffx.vue

@@ -157,6 +157,18 @@ export default {
     },
     getCharts() {
       this.$nextTick(() => {
+        const chartDom1 = document.getElementById("linechart1");
+        chartDom1 && echarts.init(chartDom1)?.dispose();
+
+        const chartDom2 = document.getElementById("linechart2");
+        chartDom2 && echarts.init(chartDom2).dispose();
+
+        const chartDom3 = document.getElementById("linechart3");
+        chartDom3 && echarts.init(chartDom3)?.dispose();
+
+        const chartDom4 = document.getElementById("linechartDialog");
+        chartDom4 && echarts.init(chartDom4)?.dispose();
+
         this.getChart1();
         this.getChart2();
         this.getChart3();
@@ -259,7 +271,6 @@ export default {
           ],
         };
         const chart = echarts.init(document.getElementById("linechart1"));
-        chart.clear();
         chart.setOption(option);
         this.resize = function () {
           chart.resize();
@@ -376,7 +387,6 @@ export default {
           ],
         };
         const chart = echarts.init(document.getElementById("linechart2"));
-        chart.clear();
         chart.setOption(option);
         this.resize = function () {
           chart.resize();
@@ -497,7 +507,6 @@ export default {
           ],
         };
         const chart = echarts.init(document.getElementById("linechart3"));
-        chart.clear();
         chart.setOption(option);
         this.resize = function () {
           chart.resize();
@@ -608,7 +617,6 @@ export default {
           ],
         };
         const chart = echarts.init(document.getElementById("linechartDialog"));
-        chart.clear();
         chart.setOption(option);
         this.resize = function () {
           chart.resize();