[add]增加智慧教务-课程信息管理、封装echarts饼图组件

src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/educationalWisdom/CourseInformationStatisticsBig.vue

@@ -0,0 +1,94 @@
+<template>
+    <div class="courseInformationStatistics">
+        <div class="titleStyle">课程分布情况一览表</div>
+        <div class="content">
+            <div class="leftContent">
+                <div>课程总数：<span class="textColor">118&nbsp;门</span></div>
+                <div class="whiteBor"></div>
+                <div>国家课程：<span class="textColor">118&nbsp;门</span></div>
+                <div>地方课程：<span class="textColor">118&nbsp;门</span></div>
+                <div>校本课程：<span class="textColor">118&nbsp;门</span></div>
+            </div>
+            <div class="rightContent">
+                <!-- 内容 -->
+                <m-echarts
+                        :echartStyle="s"
+                        :titleText="a"
+                        :tooltipFormatter="b"
+                        :opinion="c"
+                        :seriesName="d"
+                        :opinionData="e"
+                        v-on:currentEchartData="getEchartData"
+                ></m-echarts>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    import mEcharts from './utils/PieEcharts'
+    export default {
+        name: 'CourseInformationStatisticsBig',
+        components: {
+            mEcharts
+        },
+        data(){
+            return {
+                b:'销售数量',
+                c:['香蕉','苹果','橘子'],
+                d:'销售统计',
+                e:[
+                    {value:3, name:'香蕉'},
+                    {value:3, name:'苹果'},
+                    {value:3, name:'橘子'}
+                ],
+                s: {
+                    height: ''
+                }
+            }
+        },
+        created(){
+            // 获取屏幕高度
+            this.s.height = '370px';
+        },
+        methods: {
+            getEchartData(val){
+                console.log(val);
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    .courseInformationStatistics{
+        font-size: 1rem;
+        margin: 1rem;
+        .titleStyle{
+            text-align: center;
+            height: 2rem;
+        }
+        .content{
+            height: 370px;
+            .leftContent{
+                width: 30%;
+                float: left;
+                margin-top: 100px;
+                margin-left: 10%;
+                .whiteBor{
+                    height: 1rem;
+                }
+                .textColor{
+                    color: #02A7F2;
+                    font-weight: bold;
+                }
+            }
+            .rightContent{
+                width: 60%;
+                float: left;
+            }
+
+        }
+    }
+
+</style>

src/views/superFusionPlatform/mainPlatform/moduleAndLayout/moduleCom/educationalWisdom/utils/PieEcharts.vue

@@ -0,0 +1,111 @@
+<!-- 自定义 echart 组件 -->
+<template>
+    <div>
+        <!-- echart表格 -->
+        <div id="myChart" :style="echartStyle"></div>
+    </div>
+</template>
+
+<script>
+    import * as echarts from 'echarts';
+    export default {
+        props: {
+            // 样式
+            echartStyle: {
+                type: Object,
+                default(){
+                    return {}
+                }
+            },
+            // 标题文本
+            titleText: {
+                type: String,
+                default: ''
+            },
+            // 提示框键名
+            tooltipFormatter: {
+                type: String,
+                default: ''
+            },
+            // 扇形区域名称
+            opinion: {
+                type: Array,
+                default(){
+                    return []
+                }
+            },
+            // 提示框标题
+            seriesName: {
+                type: String,
+                default: ''
+            },
+            // 扇形区域数据
+            opinionData: {
+                type: Array,
+                default(){
+                    return []
+                }
+            },
+        },
+        data(){
+            return {
+                //
+            }
+        },
+        mounted(){
+            this.$nextTick(function() {
+                this.drawPie('myChart')
+            })
+        },
+        methods: {
+            // 监听扇形图点击
+            eConsole(param) {
+                // 向父组件传值
+                this.$emit("currentEchartData",param.name);
+            },
+            // 绘制饼状图
+            drawPie(id){
+                this.charts = echarts.init(document.getElementById(id));
+                this.charts.on("click", this.eConsole);
+                this.charts.setOption({
+                    title: {
+                        text: this.titleText, // 标题文本
+                        left: 'center'
+                    },
+                    tooltip : {
+                        trigger: 'item',
+                        formatter: "{a} <br/> " + this.tooltipFormatter + ":{c}"
+                    },
+                    legend: {
+                        bottom: 20,
+                        left: 'center',
+                        data: this.opinion // 扇形区域名称
+                    },
+                    series : [
+                        {
+                            name:this.seriesName, // 提示框标题
+                            type: 'pie',
+                            radius : '65%',
+                            center: ['50%', '50%'],
+                            selectedMode: 'single',
+                            data:this.opinionData, // 扇形区域数据
+                            itemStyle: {
+                                emphasis: {
+                                    shadowBlur: 10,
+                                    shadowOffsetX: 0,
+                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
+                                }
+                            }
+                        }
+                    ]
+                })
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    #myChart{
+        width: 100%;
+    }
+</style>