修复问题

src/components/HistogramHorizontal.vue

@@ -8,31 +8,60 @@ import superHorizontal from "./SuperComponent";
 export default {
   name: "chart",
   data() {
-    return superHorizontal.rootComponent.data();
+    return {
+      ...superHorizontal.rootComponent.data(),
+      chart: null
+    };
   },
   props: superHorizontal.rootComponent.props,
   mounted() {
     this.drawChart();
   },
+  watch: {
+    chartData: function(val) {
+      this.chart.changeData(val); // 动态更新数据
+    }
+  },
   methods: {
     drawChart: function() {
       console.log("XXXXSSSS", this.chartId);
       // Step 1: 创建 Chart 对象
-      const chart = new Chart({
+      this.chart = new Chart({
         container: this.chartId, // 指定图表容器 ID
         autoFit: true,
         height: 400,
         padding: [40, 40]
       });
-
       // Step 2: 载入数据源
-      chart.data(this.chartData);
+      this.chart.data(this.chartData);
 
+      this.chart.legend({
+        position: "bottom"
+      });
+      this.chart.axis("genre", {
+        labels: {
+          autoRotate: false, // 文本是否允许自动旋转
+          label: {
+            textAlign: "center", // 文本对齐方向，可取值为： left center right
+            fill: "#404040", // 文本的颜色
+            fontSize: "12", // 文本大小
+            fontWeight: "bold" // 文本粗细
+          }
+        }
+      });
+      this.chart.tooltip({
+        shared: true,
+        showMarkers: false
+      });
+      this.chart.interaction("active-region");
       // Step 3: 创建图形语法，绘制柱状图
-      chart.interval().position("genre*sold");
+      this.chart
+        .interval()
+        .adjust("stack")
+        .position("genre*sold");
 
       // Step 4: 渲染图表
-      chart.render();
+      this.chart.render();
     }
   }
 };

src/components/HistogramHorizontals.vue

@@ -8,44 +8,52 @@ import superHorizontal from "./SuperComponent";
 export default {
   name: "chart",
   data() {
-    return superHorizontal.rootComponent.data();
+    return {
+      ...superHorizontal.rootComponent.data(),
+      chart: null
+    };
   },
   props: superHorizontal.rootComponent.props,
   mounted() {
     this.drawChart();
   },
+  watch: {
+    chartData: function(val) {
+      this.chart.changeData(val); // 动态更新数据
+    }
+  },
   methods: {
     drawChart: function() {
       console.log("XXXXSSSS", this.chartId);
       // Step 1: 创建 Chart 对象
-      const chart = new Chart({
+      this.chart = new Chart({
         container: this.chartId,
         autoFit: true,
         height: 500
       });
-      chart.data(this.chartData);
+      this.chart.data(this.chartData);
 
-      chart.axis("time", {
+      this.chart.axis("time", {
         tickLine: null
       });
 
-      // chart.legend({
-      //   position: "bottom"
-      // });
+      this.chart.legend({
+        position: "bottom"
+      });
 
-      chart.tooltip({
+      this.chart.tooltip({
         shared: true,
         showMarkers: false
       });
-      chart.interaction("active-region");
+      this.chart.interaction("active-region");
 
-      chart
+      this.chart
         .interval()
         .adjust("stack")
         .position("time*value")
         .color("type", ["#F3CC1C", "#1890ff", "#6190FF", "#36CFAA"]);
 
-      chart.render();
+      this.chart.render();
     }
   }
 };

src/views/testData/testData.html

@@ -43,7 +43,7 @@
       <div v-if="!isCrossAnalyse"><span
           v-if="currentDate">截止到{{currentDate}}，问卷共{{answerData.answerAll || 0}}人参与，完成全部题目的有{{answerData.answerJoin || 0}}人。</span>
       </div>
-      <div v-if="isCrossAnalyse">
+      <div v-if="isCrossAnalyse" style="display: flex;align-items:center;">
         <div class="analyseBag">
           <div class="analyseBagTitle">
             <el-dropdown trigger="click" @command="analyseCommand">
@@ -63,6 +63,8 @@
             </el-cascader>
           </div>
         </div>
+        <div class="addBag" @click="isCrossAnalyse=false"><i class="el-icon-circle-plus-outline"></i><span> 新建数据包</span>
+        </div>
       </div>
       <div class="switchItem">
         <div class="switch" :class="{ switchSelected: !isCrossAnalyse}" @click="isCrossAnalyse=false">答题统计</div>
@@ -185,16 +187,16 @@
       <div class="crossAnalyseTable" v-for="(item, index) in crossAnalyse" :key="index">
         <div class="crossAnalyseTitle">题目{{index+1}}:</div>
         <div class="crossAnalyseChart">
-          <HistogramHorizontals :id="'c2'" :chartId="'caaaaa'+index" :chart-data="data">
+          <HistogramHorizontals :id="'c2'" :chartId="'caaaaa'+index" :chart-data="item.data">
           </HistogramHorizontals>
         </div>
         <div class="table">
           <div class="caTable">
             <div class="headerRow" style="width: 100px;">X\Y</div>
-            <div class="headerRow" v-for="(item1,index1) in item[0].title" :key="index1"
-              :style="`width:${840/(item[0].title.length || 1)}px`">{{item1}}</div>
+            <div class="headerRow" v-for="(item1,index1) in item.table[0].title" :key="index1"
+              :style="`width:${840/(item.table[0].title.length || 1)}px`">{{item1}}</div>
           </div>
-          <div class="caTable" v-for="(items,indexs) in item" :key="indexs">
+          <div class="caTable" v-for="(items,indexs) in item.table" :key="indexs">
             <div class="tabkeRow" style="width: 100px;">{{items.name}}</div>
             <div class="tabkeRow" v-for="(item0,index0) in items.value" :key="index0"
               :style="`width:${840/(items.value.length || 1)}px`">{{item0}}</div>

src/views/testData/testData.js

@@ -522,6 +522,25 @@ export default {
         .catch(() => { });
     },
     async getCrossAnalyse() {
+
+      var analyseBagIdList = [];
+      var province = ""
+      var city = ""
+      var district = ""
+
+      if (this.analyseCommandSel == "数据包") {
+        if (this.analyseValue.length > 0) {
+          analyseBagIdList.push(this.analyseValue[0])
+        }
+      } else if (this.analyseCommandSel == "区域") {
+        if (this.analyseValue.length > 0) {
+          province = this.analyseValue[0]
+        } else if (this.analyseValue.length > 1) {
+          city = this.analyseValue[1]
+        } else if (this.analyseValue.length > 2) {
+          district = this.analyseValue[2]
+        }
+      }
       var testThemesIdList = [];
       for (var i = 0; i < this.options.length; i++) {
         testThemesIdList.push(this.options[i].id);
@@ -545,6 +564,10 @@ export default {
       }
 
       let data = {
+        province: province,
+        city: city,
+        district: district,
+        analyseBagIdList: analyseBagIdList,
         testThemesIdList: testThemesIdList,
         xlist: xlist,
         ylist: ylist
@@ -578,13 +601,13 @@ export default {
             for (var q = 0; q < qqq.length; q++) {
               sss.push({ name: rowArr[q], title: qqq[q].name, value: qqq[q].value })
             }
-            this.crossAnalyse.push(sss);
+            this.crossAnalyse.push({ table: sss, data: [], question: null });
           }
           console.log("SSSSS", this.crossAnalyse);
 
-          var data = [];
           for (var x = 0; x < this.crossAnalyse.length; x++) {
-            var top = this.crossAnalyse[x];
+            var data = [];
+            var top = this.crossAnalyse[x].table;
             for (var y = 0; y < top.length; y++) {
               var one = top[y].value;
               console.log("one", top[y].name)
@@ -593,9 +616,9 @@ export default {
                 data.push({ time: top[y].name, type: top[y].title[z], value: two })
               }
             }
+            this.crossAnalyse[x].data = data;
           }
-          console.log("data", data);
-          this.data = data
+          console.log("data", this.crossAnalyse);
 
         } else {
           console.log("error");

src/views/testData/testData.scss

@@ -180,6 +180,15 @@
         }
       }
     }
+    .addBag {
+      font-size:12px;
+      font-family:PingFangSC-Regular,PingFang SC;
+      font-weight:400;
+      color:rgba(100,107,129,1);
+      line-height:17px;
+      cursor: pointer;
+      padding-left: 10px;
+    }
   }
   .answer {
     width: 100%;
@@ -523,6 +532,7 @@
           color:rgba(255,255,255,1);
           line-height:28px;
           text-align: center;
+          cursor: pointer;
         }
         .analyseTip {
           font-size:12px;