曹冬冬 před 5 roky
rodič
revize
0536dbf4ff

+ 5 - 26
src/components/HistogramHorizontal.vue

@@ -29,38 +29,17 @@ export default {
       this.chart = new Chart({
         container: this.chartId, // 指定图表容器 ID
         autoFit: true,
-        height: 400,
-        padding: [40, 40]
+        height: 400
       });
-      // Step 2: 载入数据源
-      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.data(this.chartData);
+      this.chart.scale("sold", { nice: true });
+      this.chart.coordinate().transpose();
       this.chart.tooltip({
-        shared: true,
         showMarkers: false
       });
       this.chart.interaction("active-region");
-      // Step 3: 创建图形语法,绘制柱状图
-      this.chart
-        .interval()
-        .adjust("stack")
-        .position("genre*sold");
-
-      // Step 4: 渲染图表
+      this.chart.interval().position("genre*sold");
       this.chart.render();
     }
   }

+ 13 - 6
src/views/testData/testData.html

@@ -127,7 +127,8 @@
               <div class="option">{{optionItem.content}}</div>
               <div class="numbers">{{optionItem.answerCount}}</div>
               <div class="percent">
-                <el-progress :percentage="((optionItem.answerCount/item.answerTotal)*100).toFixed(0) || 0"
+                <el-progress
+                  :percentage="item.answerTotal==0?0:((optionItem.answerCount/item.answerTotal)*100).toFixed(0)"
                   color="#4E5DFF" :stroke-width="8">
                 </el-progress>
               </div>
@@ -142,7 +143,11 @@
       </div>
       <div class="chart" v-if="!isShowTable">
         <div class="chartItem" v-for="(item, index) in chartData" :key="index">
-          <div class="chartTitle">题目{{index+1}}:{{item.content}}[{{item.chooseType == '1'? '单选':'多选'}}]</div>
+          <div class="chartTitle">题目{{index+1}}:{{item.content}}[{{item.chooseType == '1'? '单选':'多选'}}]<span
+              v-if="item.testOrderList.length">(包含测试<span v-for="(testOrder,textIndex) in item.testOrderList"
+                :key="index">{{testOrder}}<span
+                  v-if="textIndex!=(item.testOrderList.length-1)">、</span></span>中的数据)</span>
+          </div>
           <div class="chartData">
             <HistogramHorizontal :id="'c1'" :chartId="'c'+item.questionId" :chart-data="item.data">
             </HistogramHorizontal>
@@ -193,13 +198,15 @@
         <div class="table">
           <div class="caTable">
             <div class="headerRow" style="width: 100px;">X\Y</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 class="headerRow" v-for="(item1,index1) in item.table[0].title" :key="index1" v-if="index1"
+              :style="`width:${740/(item.table[0].title.length-1 || 1)}px`">{{item1}}</div>
+            <div class="headerRow" style="width: 100px;">总计(人次)</div>
           </div>
           <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>
+            <div class="tabkeRow" v-for="(item0,index0) in items.value" :key="index0" v-if="index0"
+              :style="`width:${740/(items.value.length-1 || 1)}px`">{{item0}}</div>
+            <div class="tabkeRow" style="width: 100px;">{{items.value[0]}}</div>
           </div>
         </div>
       </div>

+ 32 - 22
src/views/testData/testData.js

@@ -192,7 +192,7 @@ export default {
           }
           var element = { value: item._id, label: item.title, children: children, id: item._id };
           this.options.push(element);
-          this.questionList = questionList;
+          this.questionList.push(questionList);
           // 查询数据包列表
           this.getCondition();
         } else {
@@ -243,12 +243,15 @@ export default {
     handleChange(value, index) {
       console.log(value, index, this.oldValue);
       for (var i = 0; i < this.questionList.length; i++) {
-        if (value[1] == this.questionList[i].questionId) {
-          if (this.oldValue.length >= index + 1) {
-            console.log("XXXXXXXXXXXXX");
-            this.setOptionsDisabled(this.oldValue[index], false);
+        var questionList = this.questionList[i]
+        for (var j = 0; j < questionList.length; j++) {
+          if (value[1] == questionList[j].questionId) {
+            if (this.oldValue.length >= index + 1) {
+              console.log("XXXXXXXXXXXXX");
+              this.setOptionsDisabled(this.oldValue[index], false);
+            }
+            this.questionListSel[index] = questionList[j];
           }
-          this.questionListSel[index] = this.questionList[i];
         }
       }
       this.setOptionsDisabled(value, true);
@@ -283,13 +286,15 @@ export default {
     handleChangeY(value, index) {
       console.log("handleChangeX", value, index, this.optionsYOldValue);
       for (var i = 0; i < this.questionList.length; i++) {
-        if (value[1] == this.questionList[i].questionId) {
-          if (this.optionsYOldValue.length >= index + 1) {
-            console.log("XXXXXXXXXXXXX");
-            this.setOptionsDisabledXY(this.optionsYOldValue[index], false, 1);
-            this.setOptionsDisabledXY(this.optionsYOldValue[index], false, 0);
+        var questionList = this.questionList[i];
+        for (var j = 0; j < questionList.length; j++) {
+          if (value[1] == questionList[j].questionId) {
+            if (this.optionsYOldValue.length >= index + 1) {
+              this.setOptionsDisabledXY(this.optionsYOldValue[index], false, 1);
+              this.setOptionsDisabledXY(this.optionsYOldValue[index], false, 0);
+            }
+            // this.questionListSel[index] = this.questionList[i];
           }
-          // this.questionListSel[index] = this.questionList[i];
         }
       }
       this.setOptionsDisabledXY(value, true, 1);
@@ -549,16 +554,18 @@ export default {
       var ylist = [];
       for (var i = 0; i < this.questionList.length; i++) {
         var item = this.questionList[i];
-        for (var m = 0; m < this.optionsXValue.length; m++) {
-          var element = this.optionsXValue[m];
-          if (item.questionId == element[1]) {
-            xlist.push(item);
+        for (var j = 0; j < item.length; j++) {
+          for (var m = 0; m < this.optionsXValue.length; m++) {
+            var element = this.optionsXValue[m];
+            if (item[j].questionId == element[1]) {
+              xlist.push(item[j]);
+            }
           }
-        }
-        for (var n = 0; n < this.optionsYValue.length; n++) {
-          var element = this.optionsYValue[n];
-          if (item.questionId == element[1]) {
-            ylist.push(item);
+          for (var n = 0; n < this.optionsYValue.length; n++) {
+            var element = this.optionsYValue[n];
+            if (item[j].questionId == element[1]) {
+              ylist.push(item[j]);
+            }
           }
         }
       }
@@ -613,10 +620,13 @@ export default {
               console.log("one", top[y].name)
               for (var z = 0; z < one.length; z++) {
                 var two = one[z];
-                data.push({ time: top[y].name, type: top[y].title[z], value: two })
+                if (top[y].title[z] != "total") {
+                  data.push({ time: top[y].name, type: top[y].title[z], value: two })
+                }
               }
             }
             this.crossAnalyse[x].data = data;
+            this.crossAnalyse[x].question = data;
           }
           console.log("data", this.crossAnalyse);
 

+ 2 - 2
src/views/testData/testData.scss

@@ -39,7 +39,7 @@
     }
     .testItem {
       width: calc(100% - 200px);
-      height: 78px;
+      height: 84px;
       display: flex;
       flex-direction: row;
       margin-left: 100px;
@@ -449,7 +449,7 @@
         }
         .chartData {
           width: 100%;
-          height: 400px;
+          margin: 10px 0px;
         }
       }
     }