UI回测问题解决

src/utils/learning/chartData.js

@@ -14,9 +14,10 @@ export function dustributeOption(legendData, seriesData) {
     },
     label: {
       // formatter: "{d}%",
+      // color: '#000000',
       formatter:function(data){ return data.percent.toFixed(1)+"%";} 
     },
-    color: ['#FF9A4B', '#FFBC3D', '#39AF9A', '#3BA0FF', '#5D7092'],
+    color: ['#FF9A4B', '#39AF9A', '#FFB01B', '#3BA0FF', '#5D7092'],
     legend: {
       orient: "horizontal",
       top: "",
@@ -27,9 +28,10 @@ export function dustributeOption(legendData, seriesData) {
       {
         name: "",
         type: "pie",
-        radius: "60%",
-        center: ["50%", "50%"],
+        radius: [0, "78%"],
+        center: ["50%", "59%"],
         data: seriesData,
+
         itemStyle: {
           emphasis: {
             shadowBlur: 10,
@@ -66,15 +68,15 @@ export function recordOption(legendData, xAxisData, seriesData) {
         }
         relVal += value + "人";
         let divList = [];
-        divList[0] = "<div style='background: #3BA0FF;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
-        divList[1] = "<div style='background: #FF9A4B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+        divList[0] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+        divList[1] = "<div style='background: #39AF9A;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
         divList[2] = "<div style='background: #FFB01B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
-        divList[3] = "<div style='background: #39AF9A;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
-        divList[4] = "<div style='background: #5D7092;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
-        for (let j = params.length - 1; j >= 0; j--) {
+        divList[3] = "<div style='background: #FF9A4B;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+        divList[4] = "<div style='background: #3BA0FF;height: 12px;width: 20px;margin: 5px 5px 0 2px;float: left;border-radius:2px;'></div>";
+        for (let j = params.length - 1 , k = 0; j >= 0; j-- , k++) {
           if(value != 0) {
             relVal +=
-              "<br/>" + divList[j] +
+              "<br/>" + divList[k] +
               params[j].seriesName +
               "占比： " +
               (
@@ -84,7 +86,7 @@ export function recordOption(legendData, xAxisData, seriesData) {
               "%";
           } else {
             relVal +=
-              "<br/>" + divList[j] +
+              "<br/>" + divList[k] +
               params[j].seriesName +
               "占比： "+ "0%";
           }
@@ -94,11 +96,12 @@ export function recordOption(legendData, xAxisData, seriesData) {
     },
     color: ['#3BA0FF', '#FF9A4B', '#FFB01B', '#39AF9A', '#5D7092'],
     legend: {
+      right: "3%",
       data: legendData,
     },
     grid: {
       left: "3%",
-      right: "4%",
+      right: "3%",
       bottom: "3%",
       containLabel: true
     },
@@ -175,11 +178,12 @@ export function certificateOption(xAxisData, seriesJoin, seriesCert, seriesRate,
       right:"10%",
     },
     legend: {
+      right: '6%',
       data: legendData,
     },
     grid: {
-      left: 20,
-      right: 20,
+      left: '3%',
+      right: '3%',
       containLabel: true
     },
     xAxis: [
@@ -377,11 +381,13 @@ export function educationEffect(xAxisData, seriesBefore, seriesAfter) {
     },
     color: ["#FEBB3C", "#39AF9A"],
     legend: {
+      right: "3%",
       data: ["项目前总正确率", "项目后总正确率"]
     },
     grid: {
+      top: '20%',
       left: "3%",
-      right: "4%",
+      right: "3%",
       bottom: "3%",
       containLabel: true
     },
@@ -399,8 +405,9 @@ export function educationEffect(xAxisData, seriesBefore, seriesAfter) {
       min: 0,
       max: 100,
       type: "value",
+      name: "正确率 (%)",
       axisLabel: {
-        formatter: "{value} %"
+        formatter: "{value}%"
       },
       axisLine: { //隐藏轴线
         show: false
@@ -474,9 +481,11 @@ export function knowledgeEffect(xAxisData, seriesBefore, seriesAfter) {
       right:"10%",
     },
     legend: {
+      right: 20,
       data: ["培训前正确率", "培训后正确率"]
     },
     grid: {
+      top: '20%',
       left: 20,
       right: 20,
       containLabel: true
@@ -499,6 +508,7 @@ export function knowledgeEffect(xAxisData, seriesBefore, seriesAfter) {
       min: 0,
       max: 100,
       type: "value",
+      name: "正确率 (%)",
       axisLine: { //隐藏轴线
         show: false
       },
@@ -506,7 +516,7 @@ export function knowledgeEffect(xAxisData, seriesBefore, seriesAfter) {
         show: false
       },
       axisLabel: {
-        formatter: "{value} %"
+        formatter: "{value}%"
       }
     },
     series: [

src/utils/operation.js

@@ -388,7 +388,7 @@ export function getPicOption(title, legendData, colorData, seriesData) {
     legend: {
       orient: "vertical",
       top: "center",
-      right: "right",
+      right: "26",
       data: legendData
     },
     grid: {
@@ -403,8 +403,8 @@ export function getPicOption(title, legendData, colorData, seriesData) {
       {
         name: "",
         type: "pie",
-        radius: "55%",
-        center: ["40%", "55%"],
+        radius:  [0, '55%'],
+        center: ["50%", "57.2%"],
         data: seriesData,
       }
     ]
@@ -419,16 +419,17 @@ export function getBarOption(xAxisData, seriesData) {
       left: '20px',
       top: "20px",
     },
-    color: ['#5B8FF9'],
+    color: ['rgba(91, 143, 249, 0.85)'],
     backgroundColor: '#FFFFFF',
     tooltip: {
       trigger: 'item',
       formatter: "{b} : {c} "
     },
     grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
+      top: '84',
+      bottom: '36',
+      left: '20',
+      right: '20',
       containLabel: true
     },
     xAxis: [
@@ -721,6 +722,9 @@ export function getHospitalIdList(data) {
   return listArr;
 }
 export function learnTimeValue(value) {
+  if(value === null || value === '') {
+    return '-';
+  }
   let s = parseInt(value),m = 0, h = 0;//秒，分，小时
   if(s==NaN){//错误error
     return '';

src/views/learning/item-course-analysis.vue

 <template>
   <div class="course-analysis-wrap">
     <div class="box-list">
-      <div v-for="(item , index) in cardData" :key="index" class="box-card" v-bind:class="{ 'box-last': index == 2 }">
-        <!-- <el-card class="box-card" v-bind:class="{ 'box-last': index == 2 }"> -->
+      <div class="box-min">
+        <div v-for="(item , index) in cardData" :key="index" class="box-card" v-bind:class="{ 'box-last': index == 2 }">
           <p class="value">{{ item.value }}</p>
           <p class="title">{{ item.title }}</p>
-        <!-- </el-card> -->
+        </div>
       </div>
     </div>
     <div class="spacing"></div>
@@ -296,6 +296,12 @@ export default {
     position: relative;
     height: 120px;
     background: #f0f2f5;
+    overflow-x: auto;
+    overflow-y: hidden;
+    .box-min {
+      height: 120px;
+      min-width: 950px;
+    }
     .box-card {
       position: relative;
       background-color: #ffffff;

src/views/learning/item-crowd-analysis.vue

@@ -291,7 +291,7 @@ export default {
       let educationList = data;
       let legendData = [];
       let seriesData = [];
-      let colorData = ["#7453FF", "#3BA0FF", "#5D7092", "#39AF9A", "#FFBC3D", "#FF9A4B", "#8A2BE2"];
+      let colorData = ["#7453FF", "#3BA0FF", "#5D7092", "#39AF9A", "#FFBC3D", "#FF9A4B", "#B87F00"];
 
       for (let i = 0; i < educationList.length; i++) {
         legendData[i] = educationList[i].name;
@@ -319,7 +319,7 @@ export default {
       let titleList = data;
       let legendData = [];
       let seriesData = [];
-      let colorData = ["#3BA0FF", "#366BCB", "#39AF9A", "#FFBC3D", "#FFBC3D", "#67E0E3", "#8A2BE2"];
+      let colorData = ["#3BA0FF", "#366BCB", "#39AF9A", "#FFBC3D", "#FFBC3D", "#67E0E3", "#B87F00"];
       for (let i = 0; i < titleList.length; i++) {
         legendData[i] = titleList[i].name;
         seriesData[i] = titleList[i];
@@ -449,7 +449,7 @@ export default {
       }
       .sex {
         position: relative;
-        top: 42px;
+        top: 67px;
         left: 0;
         .sex-item {
           float: left;

src/views/learning/item-data-all.vue

@@ -2,7 +2,7 @@
   <div class="data-all-wrap">
     <div v-if="dataType == 0" class="data-chart">
       <div class="box-list">
-        <!-- <div v-for="(item , index) in cardData" :key="index" class="box"> -->
+        <div class="box-min">
           <div v-for="(item , index) in cardData" :key="index" class="box-card" v-bind:class="{ 'box-last': index == 2 }">
             <el-tooltip v-if="index == 2" class="item-tool" placement="bottom-end" effect="light">
               <div slot="content">
@@ -20,7 +20,7 @@
               <p class="should">{{ item.shouldKey }}:{{ item.shouldNum | toThousands }}</p>
             </div>
           </div>
-        <!-- </div> -->
+        </div>
       </div>
       <div class="date-table">
          <el-tabs class="change-range" v-model="checkRange" type="card" @tab-click="handleCheckRange">
@@ -848,6 +848,7 @@ export default {
         }
         index++;
       }
+      let colorValue = ['#5D7092', '#39AF9A', '#FFB01B', '#FF9A4B', '#3BA0FF'];
       for(let z = 0; z < seriesArr.length ; z++) {
         let seriesObj = {
           name: seriesName[z],
@@ -860,6 +861,9 @@ export default {
               rotate: -90,
             }
           },
+          itemStyle: {
+            color: colorValue[seriesArr.length - z -1],
+          },
           data: seriesArr[z],
         };
         seriesData.push(seriesObj);
@@ -1003,11 +1007,14 @@ export default {
   }
   .box-list {
     position: relative;
-    padding: 30px 30px 0 30px;
-    height: 136px;
-    // .box {
-    //   height: 106px;
-    // }
+    margin: 30px 30px 0 30px;
+    height: 120px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    .box-min {
+      height: 106px;
+      min-width: 1050px;
+    }
     .box-card {
       position: relative;
       background-color: #F1F7F6;
@@ -1178,7 +1185,7 @@ export default {
     .distributeChart {
       position: relative;
       // float: left;
-      margin: 0 auto;
+      margin: 0 auto 30px auto;
       // width: 70%;
       width: 618px;
       height: 320px;
@@ -1186,13 +1193,13 @@ export default {
     .data-text {
       position: absolute;
       top: 0;
-      right: 0;
-      width: 30%;
+      left: 50%;
+      margin-left: 307px;
       height: 320px;
+      width: 30%;
       .content-text {
         position: relative;
         margin-top: 78px;
-        margin-left: 35%;
         text-align: left;
         p {
           margin-top: 20px;
@@ -1225,7 +1232,7 @@ export default {
       height: 416px;
       .content-text {
         position: relative;
-        margin-top: 100px;
+        margin-top: 56px;
         text-align: left;
         p {
           margin-top: 20px;