updata

src/pages/index/Right.vue

@@ -15,7 +15,7 @@
         <div class="course">
             <div class="coursetitle">
                 <div class="minTitle">教学课程</div>
-                <div class="seemore">查看更多</div>
+                <div class="seemore" @click="Seemore">查看更多</div>
             </div>
             <p class="percent">
                 <span v-for="(item, l) in coursedata" :key="l">
@@ -27,6 +27,10 @@
                 <bar-chart :layout="lineConfig.layout" :option="lineConfig.option" />
             </div>
         </div>
+        <popup-frame :visible.sync="visible" @beforeClose="closePopup">
+            <img src="../../../static/images/index/course.jpg" alt="弹框">
+        </popup-frame>
+
         <!-- 学习内容 -->
         <div class="learnContent">
             <div class="minTitle">学习内容</div>
@@ -182,27 +186,14 @@ export default {
     },
     data () {
         return {
+            visible: false,
             activeShow: false,
             showVisible: false,
             // 师资力量
             eduConfig: {},
             edu: null,
             staffConfig: {},
-            staff: [
-                {
-                    name: '****教授',
-                    value: 41
-                }, {
-                    name: '****名师',
-                    value: 53
-                }, {
-                    name: '*****专家',
-                    value: 61
-                }, {
-                    name: '*******',
-                    value: 12
-                }
-            ],
+            staff: [],
             // 教学课程
             coursedata: [],
             lineConfig: {},
@@ -374,6 +365,14 @@ export default {
                 }
             }) || []
         },
+        // 教学课程更多
+        Seemore () {
+            this.visible = true
+        },
+        // 教学课程更多关闭
+        closePopup (flag) {
+            this.visible = flag
+        },
         // 教学课程百分比
         getline () {
             this.lineConfig = {
@@ -475,6 +474,11 @@ export default {
         getlearn () {
             const xData = this.rightData.learn.data.list.map(v => v.key)
             const Data = this.rightData.learn.data.list.map(v => v.value)
+            const max = Math.max.apply(null, Data)
+            const maxdata = this.rightData.learn.data.list.map(v => {
+                return ((v.value / max) * 100).toFixed(2)
+            })
+            const data = this.rightData.learn.data.list
             this.learnConfig = {
                 layout: {
                     width: '100%',
@@ -490,6 +494,16 @@ export default {
                             textStyle: {
                                 color: '#ffffff'
                             },
+                            formatter: function (params) {
+                                let str
+                                data.forEach((item, l) => {
+                                    if (item.key === params[0].name) {
+                                        str = '<span style=' + 'font-size: 13px;font-family: Century Gothic;font-weight: 400;color: #FFFFFF;' + '>' + item.value + item.unit + '</span><br/><span style=' + 'font-size: 12px;font-family: Microsoft YaHei;font-weight: 400;color: #B8E6FF;' + '>' + params[0].name + '</span>'
+                                    }
+                                })
+
+                                return str
+                            },
                             backgroundColor: 'rgba(55, 128, 246, 0.2)',
                             borderColor: 'rgba(55, 128, 246, 0.2)'
                         },
@@ -571,7 +585,7 @@ export default {
                             label: {
                                 show: false
                             },
-                            data: Data
+                            data: maxdata
                         }
                     ]
                 }