学习效果分析中的样式问题

components/bussiness/charts/chart-column-horizontal-tc.vue

@@ -39,13 +39,14 @@ export default {
       handler(newVal) {
         let yAxisData = [], series0Data = [], series1Data = []
         yAxisData = newVal.map( item => {
-          return item.classifyName
+          return item.classifyName;
+          // return (item.classifyName || 0).toFixed(0) * 100 + '%'
         })
         series0Data = this.dataList.map( item => {
-          return item.beforeRate
+          return ((item.beforeRate|| 0) * 100).toFixed(0);
         })
         series1Data = this.dataList.map( item => {
-          return item.afterRate
+          return ((item.afterRate|| 0) * 100).toFixed(0);
         })
         this.drawColumn(yAxisData.splice(0, 5), series0Data.splice(0, 5), series1Data.splice(0, 5));
       },
@@ -78,7 +79,8 @@ export default {
           axisPointer: {
             // 坐标轴指示器，坐标轴触发有效
             type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
-          }
+          },
+          formatter: '{b}<br/>{a0}: {c0}%<br/>{a1}: {c1}%'
         },
         legend: {
           top: 20,
@@ -99,10 +101,11 @@ export default {
           color: "#676869"
         },
         xAxis: {
+          max: 100,
           axisTick: false,
           type: "value",
           axisLabel: {
-            formatter: "{value}",
+            formatter: "{value}%",
             textStyle: {
               color: "#676869"
             }
@@ -144,14 +147,28 @@ export default {
             data: series0Data,
             // data: [12, 200, 150, 80, 70, 110, 130],
             type: "bar",
-            barWidth: 15 //柱图宽度
+            barWidth: 15, //柱图宽度
+            label: {
+              normal: {
+                formatter: "{c}%",
+                show: false,
+                position: "inside"
+              }
+            }          
           },
           {
             name: "培训后正确率",
             data: series1Data,
             // data: [120, 20, 160, 80, 70, 110, 130],
             type: "bar",
-            barWidth: 15 //柱图宽度
+            barWidth: 15, //柱图宽度
+            label: {
+              normal: {
+                formatter: "{c}%",
+                show: false,
+                position: "inside"
+              }
+            }          
           }
         ]
       };

components/bussiness/charts/chart-column-vertical-tc.vue

@@ -46,16 +46,15 @@ export default {
   watch: {
     dataList: {
       handler(newVal) {
-        
         let yAxisData = [], series0Data = [], series1Data = []
         yAxisData = newVal.map( item => {
           return item.classifyName
         })
         series0Data = this.dataList.map( item => {
-          return item.beforeRate
+          return ((item.beforeRate|| 0) * 100).toFixed(0);
         })
         series1Data = this.dataList.map( item => {
-          return item.afterRate
+          return ((item.afterRate|| 0) * 100).toFixed(0);
         })
         this.drawColumn(yAxisData.splice(0, 5), series0Data.splice(0, 5), series1Data.splice(0, 5));
       },
@@ -79,7 +78,9 @@ export default {
           axisPointer: {
             // 坐标轴指示器，坐标轴触发有效
             type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
-          }
+          },
+          // formatter: '{a}<br/>{b}<br/>{c}<br/>{a0}<br/>{a1}<br/>{b0}<br/>{b1}',
+          formatter: '{b}<br/>{a0}: {c0}%<br/> {a1}: {c1}%'
         },
         legend: {
           top: 20,
@@ -103,7 +104,7 @@ export default {
           axisTick: false,
           type: "value",
           axisLabel: {
-            formatter: "{value}",
+            formatter: "{value}%",
             textStyle: {
               color: "#676869"
             }

components/bussiness/charts/chart-pie-edu.vue

 <!-- 人员学历情况饼图 -->
 <template>
   <section class="chart-pie-edu">
-    <div :id="pieId" :style="{width: '360px', height: '220px'}"></div>
+    <div :id="pieId" :style="{width: chartWidth, height: '220px'}"></div>
   </section>
 </template>
 <script>
@@ -23,6 +23,7 @@ export default {
   },
   data() {
     return {
+      chartWidth: '300px',
       pieId: 'eduPieId',
       chartHeight: "1000px",
       handledData: {},
@@ -34,8 +35,16 @@ export default {
   watch: {  
     dataList: {
       handler(newValue, oldValue) {
-        this.handlePieData(newValue);
-        this.drawPie();
+        if (process.client) {
+          let clientWidth =
+            window.outerWidth ||
+            document.body.clientWidth ||
+            document.documentElement.clientWidth;
+            this.chartWidth = Math.ceil(clientWidth * 0.90) + 'px';
+            console.log('this.chartWidth', this.chartWidth);
+        }
+          this.handlePieData(newValue);
+          this.drawPie();
       },
       deep: true
     }

components/bussiness/charts/chart-pie-title.vue

 <!-- 人员职称情况饼图 -->
 <template>
   <section class="chart-pie">
-    <div :id="pieId" :style="{width: '360px', height: '220px'}"></div>
+    <div :id="pieId" :style="{width: chartWidth, height: '220px'}"></div>
   </section>
 </template>
 <script>
@@ -30,6 +30,7 @@ export default {
   },
   data() {
     return {
+      chartWidth: '300px',
       pieId: "titlePieId",
       chartHeight: "1000px",
       handledData: {},
@@ -48,9 +49,17 @@ export default {
     // },
     dataList: {
       handler(newValue, oldValue) {
-        this.handlePieData(newValue);
-        this.drawPie();
-      },
+        if (process.client) {
+          let clientWidth =
+            window.outerWidth ||
+            document.body.clientWidth ||
+            document.documentElement.clientWidth;
+            this.chartWidth = Math.ceil(clientWidth * 0.90) + 'px';
+            console.log('this.chartWidth', this.chartWidth);
+          this.handlePieData(newValue);
+          this.drawPie();
+        }
+       },
       deep: true
     }
   },

components/common/common-header.vue

@@ -132,7 +132,7 @@ export default {
   background: #fff;
   color: #333;
   position: relative;
-  z-index: 2009;
+  z-index: 10000000;
   .nav-back {
     display: inline-block;
     position: absolute;

pages/index.vue

 <template>
   <section class="container">
-    <CommonHeader :title="projectInfo.projectName"></CommonHeader>
+    <CommonHeader :title="projectInfo.projectName | shortName"></CommonHeader>
     <CommonAreaSelect
       @areaClick="areaTabClick" 
       @orgClick="orgTabClick"
@@ -33,6 +33,7 @@
         <ShowAll @action="gotoPage('/rank-days')"></ShowAll>
       </div>
       <div v-show="isSingleOrg">
+        <CommonTitle title="培训机构情况"></CommonTitle>
         <OrgDoctorList
           @orgDoctorTabChange="orgDoctorTabChange"
           :certUserList="orgDoctorTabData.certUserList"
@@ -305,6 +306,19 @@ export default {
       }
     };
   },
+  filters: {
+    shortName: function (value, length = 15, append = '...') {
+      if (value && value.length > length) {
+        return value.substring(0, length) + append
+      } else {
+        return value
+      }
+    },
+    // convert: function (value, unitName = '分钟') {
+    //   if(!value) return 0 + unitName;
+    //   return Math.ceil(value / 60) + unitName
+    // },
+  },
   computed: {
     ...mapGetters({
       orgList: "orgList",