From 060092d0b465c14ad525f13a43591124465dbb2c Mon Sep 17 00:00:00 2001
From: HeHaonan <1822907900@qq.com>
Date: Wed, 21 Aug 2024 17:14:54 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=9B=BE=E6=A0=87=E5=9B=9E?=
 =?UTF-8?q?=E6=98=BE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/bostonAnalysis.vue             | 171 ++++++++++++------
 1 file changed, 111 insertions(+), 60 deletions(-)

diff --git a/src/views/portraitModel/components/bostonAnalysis.vue b/src/views/portraitModel/components/bostonAnalysis.vue
index cf93cf7..cad9f9a 100644
--- a/src/views/portraitModel/components/bostonAnalysis.vue
+++ b/src/views/portraitModel/components/bostonAnalysis.vue
@@ -158,7 +158,7 @@
             <div class="submit" @click="step4Submit">提交</div>
             <div class="drawPoint">
               <div class="point">
-                <div class="pointItem" @click="drawPointStep4('A', '#009FF1')">绘制平均消费次数X,平均消费金额Y</div>
+                <div class="pointItem" @click="drawPointStep4('E', '#009FF1')">绘制平均消费次数X,平均消费金额Y</div>
                 <span>（5,1000）</span>
               </div>
               <!-- <div class="point">
@@ -290,6 +290,17 @@ const { proxy } = getCurrentInstance();
 const baseUrl = import.meta.env.VITE_APP_BASE_API;
 const dialogVisible = ref(false);
 const knowledgeFlag = ref(false);
+const chart1OptionData = ref([]);
+const chart2OptionData = ref([]);
+const chart3OptionData = ref([]);
+const quadrant1 = ref("");
+const quadrant2 = ref("");
+const quadrant3 = ref("");
+const quadrant4 = ref("");
+const quadrant1Color = ref('')
+const quadrant2Color = ref('')
+const quadrant3Color = ref('')
+const quadrant4Color = ref('')
 const step1Data = ref([
   {
     name: "A",
@@ -586,9 +597,9 @@ const step4AnswerFlag = ref(false);
 const step5AnswerFlag = ref(false);
 onMounted(() => {
   getData();
-  step3EchartInit();
-  step4EchartInit();
-  step5EchartInit();
+  // step3EchartInit();
+  // step4EchartInit();
+  // step5EchartInit();
 });
 onBeforeUnmount(() => {
   saveData();
@@ -661,16 +672,17 @@ const step3EchartInit = () => {
           },
           borderColor: "#fff",
         },
-        data: [
-          // { value: [3, 800], name: "A" },
-          // { value: [4, 1200], name: "B" },
-          // { value: [6, 600], name: "C" },
-          // { value: [7, 1400], name: "D" },
-          // { value: [10, 1400], },
-          // [4, 1200],
-          // [6, 600],
-          // [7, 1400],
-        ],
+        // data: [
+        //   // { value: [3, 800], name: "A" },
+        //   // { value: [4, 1200], name: "B" },
+        //   // { value: [6, 600], name: "C" },
+        //   // { value: [7, 1400], name: "D" },
+        //   // { value: [10, 1400], },
+        //   // [4, 1200],
+        //   // [6, 600],
+        //   // [7, 1400],
+        // ],
+        data: chart1OptionData.value,
         type: "scatter",
       },
     ],
@@ -682,6 +694,12 @@ const step3EchartInit = () => {
       proxy.$modal.msgError("请选择要绘制的点");
       return;
     }
+    //有重复的点就重新绘制
+    for (let i in chart1OptionData.value) {
+      if (chart1OptionData.value[i].name == drawPointName.value) {
+        chart1OptionData.value.splice(i, 1);
+      }
+    }
     const pointInPixel = [param.offsetX, param.offsetY];
     console.log("pointInPixel", pointInPixel);
     // 使用 convertFromPixel方法 转换像素坐标值到逻辑坐标系上的点。获取点击位置对应的x轴数据的索引         值，借助于索引值的获取到其它的信息
@@ -695,7 +713,12 @@ const step3EchartInit = () => {
     //  let pointInGrid2 = myChart.convertFromPixel({ seriesIndex: 1 }, pointInPixel);
     // x轴数据的索引值
     console.log("pointInGrid", pointInGrid.value);
-    option.value.series[0].data.push({
+    // option.value.series[0].data.push({
+    //   value: pointInGrid.value,
+    //   name: drawPointName.value,
+    //   color: drawPointColor.value,
+    // });
+    chart1OptionData.value.push({
       value: pointInGrid.value,
       name: drawPointName.value,
       color: drawPointColor.value,
@@ -768,16 +791,17 @@ const step4EchartInit = () => {
           },
           borderColor: "#fff",
         },
-        data: [
-          // { value: [3, 800], name: "A" },
-          // { value: [4, 1200], name: "B" },
-          // { value: [6, 600], name: "C" },
-          // { value: [7, 1400], name: "D" },
-          // { value: [10, 1400], },
-          // [4, 1200],
-          // [6, 600],
-          // [7, 1400],
-        ],
+        // data: [
+        //   // { value: [3, 800], name: "A" },
+        //   // { value: [4, 1200], name: "B" },
+        //   // { value: [6, 600], name: "C" },
+        //   // { value: [7, 1400], name: "D" },
+        //   // { value: [10, 1400], },
+        //   // [4, 1200],
+        //   // [6, 600],
+        //   // [7, 1400],
+        // ],
+        data: chart2OptionData.value,
         type: "scatter",
       },
     ],
@@ -789,12 +813,23 @@ const step4EchartInit = () => {
       proxy.$modal.msgError("请选择要绘制的点");
       return;
     }
+    //有重复的点就重新绘制
+    for (let i in chart2OptionData.value) {
+      if (chart2OptionData.value[i].name == drawPointNameStep4.value) {
+        chart2OptionData.value.splice(i, 1);
+      }
+    }
     const pointInPixel = [param.offsetX, param.offsetY];
     console.log("pointInPixel4", pointInPixel);
     //将偏移值转化为坐标值
     pointInGridStep4.value = myChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
     console.log("pointInGrid4", pointInGridStep4.value);
-    option2.value.series[0].data.push({
+    // option2.value.series[0].data.push({
+    //   value: pointInGridStep4.value,
+    //   name: drawPointNameStep4.value,
+    //   color: drawPointColorStep4.value,
+    // });
+    chart2OptionData.value.push({
       value: pointInGridStep4.value,
       name: drawPointNameStep4.value,
       color: drawPointColorStep4.value,
@@ -1063,6 +1098,14 @@ const step5EchartInit = () => {
       },
     ],
   };
+  optionStep5.value.series[0].markArea.data[0][0].name = quadrant1.value;
+  optionStep5.value.series[0].markArea.data[1][0].name = quadrant2.value
+  optionStep5.value.series[0].markArea.data[2][0].name = quadrant3.value
+  optionStep5.value.series[0].markArea.data[3][0].name = quadrant4.value
+  optionStep5.value.series[0].markArea.data[0][0].itemStyle.color = quadrant1Color.value;
+  optionStep5.value.series[0].markArea.data[1][0].itemStyle.color = quadrant2Color.value;
+  optionStep5.value.series[0].markArea.data[2][0].itemStyle.color = quadrant3Color.value;
+  optionStep5.value.series[0].markArea.data[3][0].itemStyle.color = quadrant4Color.value;
   var chartDom = document.getElementById("charts3");
   var myChart = echarts.init(chartDom, "dark");
   optionStep5.value && myChart.setOption(optionStep5.value);
@@ -1162,25 +1205,25 @@ const step2Submit = () => {
 };
 const step3Submit = () => {
   step3Error.value = 0;
-  for (let i in option.value.series[0].data) {
-    console.log(option.value.series[0].data[i]);
-    if (option.value.series[0].data[i].name == "A") {
-      if (Math.round(option.value.series[0].data[i].value[0]) != 3 || Math.round(option.value.series[0].data[i].value[1]) != 800) {
+  for (let i in chart1OptionData.value) {
+    // console.log(option.value.series[0].data[i]);
+    if (chart1OptionData.value[i].name == "A") {
+      if (Math.round(chart1OptionData.value[i].value[0]) != 3 || Math.round(chart1OptionData.value[i].value[1]) != 800) {
         step3Error.value++;
       }
     }
-    if (option.value.series[0].data[i].name == "B") {
-      if (Math.round(option.value.series[0].data[i].value[0]) != 4 || Math.round(option.value.series[0].data[i].value[1]) != 1200) {
+    if (chart1OptionData.value[i].name == "B") {
+      if (Math.round(chart1OptionData.value[i].value[0]) != 4 || Math.round(chart1OptionData.value[i].value[1]) != 1200) {
         step3Error.value++;
       }
     }
-    if (option.value.series[0].data[i].name == "C") {
-      if (Math.round(option.value.series[0].data[i].value[0]) != 6 || Math.round(option.value.series[0].data[i].value[1]) != 600) {
+    if (chart1OptionData.value[i].name == "C") {
+      if (Math.round(chart1OptionData.value[i].value[0]) != 6 || Math.round(chart1OptionData.value[i].value[1]) != 600) {
         step3Error.value++;
       }
     }
-    if (option.value.series[0].data[i].name == "D") {
-      if (Math.round(option.value.series[0].data[i].value[0]) != 7 || Math.round(option.value.series[0].data[i].value[1]) != 1400) {
+    if (chart1OptionData.value[i].name == "D") {
+      if (Math.round(chart1OptionData.value[i].value[0]) != 7 || Math.round(chart1OptionData.value[i].value[1]) != 1400) {
         step3Error.value++;
       }
     }
@@ -1188,13 +1231,17 @@ const step3Submit = () => {
   console.log(step3Error.value, "错误数");
   proxy.$modal.msgSuccess("提交成功");
   step3AnswerFlag.value = true;
+  // chart2OptionData.value = chart1OptionData.value;
+  // step4EchartInit();
 };
 const step4Submit = () => {
   step4Error.value = 0;
-  for (let i in option2.value.series[0].data) {
-    console.log(option2.value.series[0].data[i]);
-    if (option2.value.series[0].data[i].name == "A") {
-      if (Math.round(option2.value.series[0].data[i].value[0]) != 5 || Math.round(option2.value.series[0].data[i].value[1]) != 1000) {
+  for (let i in chart2OptionData.value) {
+    // console.log(option2.value.series[0].data[i]);
+
+    if (chart2OptionData.value[i].name == "E") {
+      if (Math.round(chart2OptionData.value[i].value[0]) != 5 || Math.round(chart2OptionData.value[i].value[1]) != 1000) {
+        console.log(chart2OptionData.value[i]);
         step4Error.value++;
       }
     }
@@ -1263,16 +1310,16 @@ const saveData = () => {
     stepSixD: step1Data.value[3].params2,
     stepSevenA: step2Data.value[4].params1,
     stepSevenB: step2Data.value[4].params2,
-    // stepSevenC: JSON.stringify(option.value.series[0].data),
-    // stepSevenD: step2Data.value[5].params,
-    // stepEightA: step2Data.value[6].params,
-    // stepEightB: step2Data.value[7].params,
-    // stepEightC: step2Data.value[8].params,
-    // stepEightD: step2Data.value[9].params,
-    // stepNineA: step2Data.value[10].params,
-    // stepNineB: step2Data.value[11].params,
-    // stepNineC: step2Data.value[12].params,
-    // stepNineD: step2Data.value[13].params,
+    stepSevenC: JSON.stringify(chart1OptionData.value),
+    stepSevenD: JSON.stringify(chart2OptionData.value),
+    stepEightA: optionStep5.value.series[0].markArea.data[0][0].name,
+    stepEightB: optionStep5.value.series[0].markArea.data[1][0].name,
+    stepEightC: optionStep5.value.series[0].markArea.data[2][0].name,
+    stepEightD: optionStep5.value.series[0].markArea.data[3][0].name,
+    stepNineA: optionStep5.value.series[0].markArea.data[0][0].itemStyle.color,
+    stepNineB: optionStep5.value.series[0].markArea.data[1][0].itemStyle.color,
+    stepNineC: optionStep5.value.series[0].markArea.data[2][0].itemStyle.color,
+    stepNineD: optionStep5.value.series[0].markArea.data[3][0].itemStyle.color,
     // stepTenA: step2Data.value[14].params,
     // stepTenB: step2Data.value[15].params,
     // stepTenC: step2Data.value[16].params,
@@ -1326,16 +1373,17 @@ const getData = () => {
       step1Data.value[3].params2 = res.data.stepSixD;
       step2Data.value[4].params1 = res.data.stepSevenA;
       step2Data.value[4].params2 = res.data.stepSevenB;
-      // option.value.series[0].data = JSON.parse(res.data.stepSevenC);
-      // step2Data.value[5].params = res.data.stepSevenD;
-      // step2Data.value[6].params = res.data.stepEightA;
-      // step2Data.value[7].params = res.data.stepEightB;
-      // step2Data.value[8].params = res.data.stepEightC;
-      // step2Data.value[9].params = res.data.stepEightD;
-      // step2Data.value[10].params = res.data.stepNineA;
-      // step2Data.value[11].params = res.data.stepNineB;
-      // step2Data.value[12].params = res.data.stepNineC;
-      // step2Data.value[13].params = res.data.stepNineD;
+      chart1OptionData.value = JSON.parse(res.data.stepSevenC);
+      // console.log(JSON.parse(res.data.stepSevenC),'666');
+      chart2OptionData.value = JSON.parse(res.data.stepSevenD);
+      quadrant1.value = res.data.stepEightA;
+      quadrant2.value = res.data.stepEightB;
+      quadrant3.value = res.data.stepEightC;
+      quadrant4.value = res.data.stepEightD;
+      quadrant1Color.value = res.data.stepNineA;
+      quadrant2Color.value = res.data.stepNineB;
+      quadrant3Color.value = res.data.stepNineC;
+      quadrant4Color.value = res.data.stepNineD;
       // step2Data.value[14].params = res.data.stepTenA;
       // step2Data.value[15].params = res.data.stepTenB;
       // step2Data.value[16].params = res.data.stepTenC;
@@ -1363,6 +1411,9 @@ const getData = () => {
       // step5DataTable3.value[4].params1 = res.data.stepNewSix;
       // step5DataTable3.value[4].params2 = res.data.stepNewEight;
       // console.log(JSON.parse(res.data.stepSevenC));
+      step3EchartInit();
+      step4EchartInit();
+      step5EchartInit();
     })
     .catch((error) => {});
 };