百分比显示

src/components/HistogramHorizontal.vue

@@ -33,13 +33,45 @@ export default {
       });
 
       this.chart.data(this.chartData);
-      this.chart.scale("sold", { nice: true });
-      this.chart.coordinate().transpose();
-      this.chart.tooltip({
-        showMarkers: false
+      this.chart.scale({
+        sold: {
+          max: 100,
+          min: 0,
+          alias: "占该题总答题人数百分比"
+        }
+      });
+      this.chart.axis("sold", {
+        label: null,
+        title: {
+          offset: 30,
+          style: {
+            fontSize: 12,
+            fontWeight: 300
+          }
+        }
       });
+      this.chart.legend(false);
+      this.chart.coordinate().transpose();
+      this.chart
+        .interval()
+        .position("genre*sold")
+        .label("sold", {
+          style: {
+            fill: "#8d8d8d"
+          },
+          offset: 10,
+          content: originData => {
+            return originData.sold + "%";
+          }
+        })
+        .tooltip("genre*sold", (genre, sold) => {
+          return {
+            name: genre,
+            value: sold + "%"
+          };
+        });
+
       this.chart.interaction("active-region");
-      this.chart.interval().position("genre*sold");
       this.chart.render();
     }
   }

src/components/HistogramHorizontals.vue

@@ -51,8 +51,13 @@ export default {
         .interval()
         .adjust("stack")
         .position("time*value")
-        .color("type", ["#F3CC1C", "#1890ff", "#6190FF", "#36CFAA"]);
-
+        .color("type", ["#F3CC1C", "#1890ff", "#6190FF", "#36CFAA"])
+        .tooltip("type*value*total", (type, value, total) => {
+          return {
+            name: type,
+            value: value + " (" + total + "%)"
+          };
+        });
       this.chart.render();
     }
   }

src/views/testData/testData.html

@@ -217,7 +217,8 @@
           <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" v-if="index0"
-              :style="`width:${740/(items.value.length-1 || 1)}px`">{{item0}}</div>
+              :style="`width:${740/(items.value.length-1 || 1)}px`">
+              {{item0}} ({{items.value[0]==0?0:((item0 / items.value[0]) * 100).toFixed(0)}}%)</div>
             <div class="tabkeRow" style="width: 100px;">{{items.value[0]}}</div>
           </div>
         </div>

src/views/testData/testData.js

@@ -57,7 +57,8 @@ export default {
         var data = []
         var optionList = question.optionList;
         for (var j = 0; j < optionList.length; j++) {
-          data.push({ genre: optionList[j].content, sold: optionList[j].answerCount })
+          var sold = question.answerTotal == 0 ? 0 : ((optionList[j].answerCount / question.answerTotal) * 100).toFixed(0)
+          data.push({ genre: optionList[j].content, sold: parseInt(sold) })
         }
         var conditionQuestion = { data: data, ...question }
         this.chartData.push(conditionQuestion);
@@ -690,10 +691,14 @@ export default {
             for (var y = 0; y < top.length; y++) {
               var one = top[y].value;
               console.log("one", top[y].name)
+              var total = 0;
               for (var z = 0; z < one.length; z++) {
                 var two = one[z];
+                var p = total == 0 ? 0 : ((two / total) * 100).toFixed(0)
                 if (top[y].title[z] != "total") {
-                  data.push({ time: top[y].name, type: top[y].title[z], value: two })
+                  data.push({ time: top[y].name, type: top[y].title[z], value: two, total: p })
+                } else {
+                  total = two
                 }
               }
             }