图表中的提示语

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

 <!-- 柱状图-竖向 -->
 <template>
-  <section class="chart-column-vtc">
-    <div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
-  </section>
+  <div>
+    <div class="chart-column-htc">
+      <div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
+    </div>
+  </div>
 </template>
 <script>
 import { format } from "path";
-let vm = null, chartColumn = null;
+let vm = null,
+  chartColumn = null;
 export default {
   props: {
     dataList: {
@@ -19,12 +22,7 @@ export default {
     },
     colors: {
       type: Array,
-      default: () => [
-        "#FFB01B",
-        "#39AF9A",
-        "#5D7092",
-        "#FF9A4B"
-      ]
+      default: () => ["#FFB01B", "#39AF9A", "#5D7092", "#FF9A4B"]
     }
   },
   data() {
@@ -33,22 +31,28 @@ export default {
       chartHeight: "350px"
     };
   },
-  
+
   watch: {
     dataList: {
       handler(newVal) {
-        let yAxisData = [], series0Data = [], series1Data = []
-        yAxisData = newVal.map( item => {
-          return this.shortName(item.classifyName)
+        let yAxisData = [],
+          series0Data = [],
+          series1Data = [];
+        yAxisData = newVal.map(item => {
+          return this.shortName(item.classifyName);
           // return (item.classifyName || 0).toFixed(0) * 100 + '%'
-        })
-        series0Data = this.dataList.map( item => {
-          return ((item.beforeRate|| 0) * 100).toFixed(0);
-        })
-        series1Data = this.dataList.map( item => {
-          return ((item.afterRate|| 0) * 100).toFixed(0);
-        })
-        this.drawColumn(yAxisData.splice(0, 5), series0Data.splice(0, 5), series1Data.splice(0, 5));
+        });
+        series0Data = this.dataList.map(item => {
+          return ((item.beforeRate || 0) * 100).toFixed(0);
+        });
+        series1Data = this.dataList.map(item => {
+          return ((item.afterRate || 0) * 100).toFixed(0);
+        });
+        this.drawColumn(
+          yAxisData.splice(0, 5),
+          series0Data.splice(0, 5),
+          series1Data.splice(0, 5)
+        );
       },
       deep: false
     }
@@ -60,7 +64,7 @@ export default {
         window.outerWidth ||
         document.body.clientWidth ||
         document.documentElement.clientWidth;
-        this.chartWidth = (clientWidth * 0.9).toFixed(0) + 'px';
+      this.chartWidth = (clientWidth * 0.9).toFixed(0) + "px";
     }
   },
 
@@ -80,7 +84,7 @@ export default {
             // 坐标轴指示器，坐标轴触发有效
             type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
           },
-          formatter: '{b}<br/>{a0}: {c0}%<br/>{a1}: {c1}%'
+          formatter: "{b}<br/>{a0}: {c0}%<br/>{a1}: {c1}%"
         },
         legend: {
           top: 20,
@@ -119,12 +123,12 @@ export default {
           //设置网格线颜色
           splitLine: {
             show: true,
-            lineStyle:{
-              color: ['#efefef'],
+            lineStyle: {
+              color: ["#efefef"],
               width: 1,
-              type: 'solid'
+              type: "solid"
             }
-      　　 }
+          }
         },
         yAxis: {
           axisTick: false,
@@ -137,9 +141,9 @@ export default {
           },
           axisLabel: {
             formatter: "{value}",
-            textAlign: 'left',
+            textAlign: "left",
             textStyle: {
-              textAlign: 'left',
+              textAlign: "left",
               color: "#676869"
             }
           },
@@ -163,7 +167,7 @@ export default {
                 show: false,
                 position: "inside"
               }
-            }          
+            }
           },
           {
             name: "培训后正确率",
@@ -177,25 +181,25 @@ export default {
                 show: false,
                 position: "inside"
               }
-            }          
+            }
           }
         ]
       };
       chartColumn.setOption(options);
     },
-    shortName: function (value, length = 5, append = '...') {
+    shortName: function(value, length = 5, append = "...") {
       if (value && value.length > length) {
-        return value.substring(0, length) + append
+        return value.substring(0, length) + append;
       } else {
-        return value
+        return value;
       }
-    },
+    }
   }
 };
 </script>
 
 <style lang="scss" scoped>
-.chart-column-vtc {
+.chart-column-htc {
   position: relative;
   top: -6px;
   // height: 280px;

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

 <!-- 柱状图-竖向 -->
 <template>
-  <section class="chart-column-vtc">
-    <div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
-  </section>
+  <div>
+    <div class="chart-column-vtc">
+      <div :id="id" :style="{width: chartWidth, height: chartHeight}"></div>
+    </div>
+    <TipsInfoChart content="报告数据来源仅包含摸底考和正式考的课程培训"></TipsInfoChart>
+  </div>
 </template>
 <script>
 import { format } from "path";
+import TipsInfoChart from "@/components/bussiness/tips-info-chart";
 let vm = null, chartColumn = null;
 export default {
+  components: {
+    TipsInfoChart
+  },
   props: {
     dataList: {
       type: Array,
@@ -182,7 +189,7 @@ export default {
   position: relative;
   top: -6px;
   // height: 280px;
-  margin: 15px;
+  margin: 15px 15px 0;
   background: rgba(255, 255, 255, 1);
   box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.04);
   border-radius: 6px;

components/bussiness/tips-info-chart.vue

+<template>
+  <div class="tips-info-wrapper">
+    <span>{{content}}</span>
+  </div>
+</template>
+<script>
+  export default {
+    props: {
+      content: {
+        type: String,
+        default: '报表数据来源包括用户参加正式考试，不包含摸底考试'
+      }
+    }
+  }
+</script>
+<style lang="less" scoped>
+  .tips-info-wrapper {
+    height: 44px;
+    line-height: 44px;
+    font-size: 20px;
+    padding: 0 15px;
+    text-align: center;
+    span {
+      display: inline-block;
+      width: 100%;
+      font-size: 13px;
+      font-weight: 400;
+      color: #676869;
+      // border-bottom: 1px solid #F0F1F2;
+    }
+  }
+</style>
\ No newline at end of file

pages/index.vue

 <template>
   <section class="container">
-    <a href="tel:13817237261">打电话：13817237261</a>
     <CommonHeader :title="projectInfo.projectName | shortName"></CommonHeader>
     <CommonAreaSelect
       @areaClick="areaTabClick" 
@@ -88,6 +87,7 @@
       <CommonSplitLine></CommonSplitLine>
       <CommonTitle title="不同学历培训前后正确率对比"></CommonTitle>
       <ChartColumnVerticalTC :dataList="studyEffect.educationEffectList" id="chartColumnVerticalTC"></ChartColumnVerticalTC>
+      <CommonSplitLine style="margin-top: 10px;"></CommonSplitLine>
       <CommonTitle title="培训前后知识点掌握情况"></CommonTitle>
       <ChartColumnHorizontalTC :dataList="studyEffect.knowledgeEffectList" id="ChartColumnVerticalTC2"></ChartColumnHorizontalTC>
       <ShowAll @action="gotoPage('/klgpoint')" class="mt-10"></ShowAll>
@@ -104,6 +104,7 @@
     <PicaOrg v-show="isShowOrg" @confirm="orgConfirm" @cancel="orgCancel"></PicaOrg>
     <CommonLoading v-show="false"></CommonLoading>
     <PopTips :tipsContent="tipsContent" @clickTips="clickTips" v-show="isShowTips"></PopTips>
+    <a href="tel:13817237261">打电话：13817237261</a>
   </section>
 </template>
 
@@ -153,7 +154,6 @@ import CourseTimesList from "@/components/bussiness/course-times-list";
 import OrgDoctorList from "@/components/bussiness/org-doctor-list";
 import ExamList from "@/components/bussiness/exam-list";
 import PopTips from "@/components/bussiness/pop-tips";
-
 import CommonCard from "@/components/common/common-card";
 import { getGeneralData } from "@/service/index";
 
@@ -189,7 +189,7 @@ export default {
     ChartColumnVerticalTimes,
     ChartColumnVerticalScore,
     PopTips,
-    CommonTitleWithWhat
+    CommonTitleWithWhat,
   },
   data() {
     return {