Merge branch 'master' of https://git.cocorobo.cn/CocoRoboLabs/ssti-CollegeManage

src/views/echarts.vue

@@ -10,33 +10,33 @@
         <div class="topData">
           <div class="DataTitle">创客项目人数</div>
           <div class="topData_value">
-            <span>329</span>
+            <span>{{HeaderData.people}}</span>
             <span><img src="@/assets/img/upIcon.png"></span>
           </div>
         </div>
         <div class="topData">
           <div class="DataTitle">目前积累创客项目数量</div>
           <div class="topData_value">
-            <span>40</span>
+            <span>{{ HeaderData.project }}</span>
           </div>
         </div>
         <div class="topData">
           <div class="DataTitle">创客活动数量</div>
           <div class="topData_value">
-            <span>25</span>
+            <span>{{ HeaderData.activity }}</span>
           </div>
         </div>
         <div class="topData">
           <div class="DataTitle">学院目前资金总预算</div>
           <div class="topData_value">
-            <span>100</span>
+            <span>{{ HeaderData.budget }}</span>
             <span>（千万）</span>
           </div>
         </div>
         <div class="topData">
           <div class="DataTitle">已支出预算</div>
           <div class="topData_value">
-            <span>25</span>
+            <span>{{ HeaderData.isPay }}</span>
             <span>（千万）</span>
           </div>
         </div>
@@ -123,16 +123,62 @@
    
     data() {
       return {
+        //头部区域数据
+        HeaderData:{
+          people:329,
+          project:40,
+          activity:25,
+          budget:100,
+          isPay:25
+        },
         //圆形
-        CircularData:{
+        CircularData:[
+          {value:30,name:"个人创客"},
+          {value:70,name:"创客活动"}
+        ],
+        //横行的柱状
+        HorizontalData:[
+            [ '物联网激光切割器',0],
+            [ '人工智能领跑马拉松',1000, ],
+            [ '3D演奏智能工具', 2000],
+            [ '人工智能分链机器',3000],
+        ],
+        // 柱状
+        ColumnarData:[
+              ['3D智能分链机器', 2000],
+              ['3D智能分链机器1',3000],
+              ['3D智能分链机器2', 2500],
+              ['3D智能分链机器3', 1000],
+              ['3D智能分链机器4', 2000],
+              ['3D智能分链机器5',3000],
+              ['3D智能分链机器6', 2500],
+              ['3D智能分链机器7', 1000],
+              ['3D智能分链机器8', 2000],
+              ['3D智能分链机器9',3000],
+              ['3D智能分链机器10', 2500],
+              ['3D智能分链机器11', 1000],
+              ['3D智能分链机器12', 2000],
+              ['3D智能分链机器13',3000],
+              ['3D智能分链机器14', 2500],
+              ['3D智能分链机器15', 1000],
+            ],
+        tableData: [
+          {title:"人工智能分链机器",pro_leader:"覃罡彤",TypeName:"个人创客",Activity:"286",ClassName:"信息与通讯学院"},
+          {title:"3D演奏智能工具",pro_leader:"袁一鸣",TypeName:"个人创客",Activity:"225",ClassName:"信息与通讯学院"},
+          {title:"物联网切割机器",pro_leader:"张晓分",TypeName:"个人创客",Activity:"169",ClassName:"中德制造"},
+          {title:"人工智能领航AI马拉松",pro_leader:"林子夏",TypeName:"创客活动",Activity:"121",ClassName:"中德制造"},
+        ]
+      };
+    },
+    methods: {
+      //圆形饼图
+      setCircularData(){
+        const Circular = echarts.init(this.$refs['Circular']);
+        let option = {
           title:{
             text:"创新创业项目类型"
           },
           legend: {
-            data:[
-              "创客活动",
-              "个人创客"
-            ],
             orient: 'vertical',
             top:"10%",
             left:"left"
@@ -145,21 +191,16 @@
                 position:"inner",
                 formatter:'{d}%'
               },
-              data: [
-                {
-                  value: 30,
-                  name:"创客活动"
-                },
-                {
-                  value: 70,
-                  name:"个人创客"
-                },
-              ],
+              data: this.CircularData
             }
           ]
-        },
-        //横行的柱状
-        HorizontalData:{
+        }
+        Circular.setOption(option)
+      },
+      //横向柱状图
+      setHorizontalData(){
+        const Horizontal = echarts.init(this.$refs['Horizontal']);
+        let option = {
           grid: {
             top: 80, // 设置网格顶部的边距为 50px 
             left:10,
@@ -172,11 +213,8 @@
           },
           dataset: {
             source: [
-              ['amount', 'product'],
-              [ 0, '物联网激光切割器'],
-              [ 1000, '人工智能领跑马拉松'],
-              [ 2000, '3D演奏智能工具'],
-              [ 3000, '人工智能分链机器'],
+              [ 'product', 'amount'],
+              ...this.HorizontalData
             ],
           },
           xAxis: { 
@@ -200,9 +238,10 @@
                 let newText = value.slice(0,vl)+'\n'+value.slice(vl)
                 return newText;
             },
-            color:(value,index)=>{
-              const textWidth = this.HorizontalData['dataset']['source'][this.HorizontalData['dataset']['source'].length-1][0]/6/2;
-              const vl = this.HorizontalData['dataset']['source'][index+1][0]
+            color:function(value,index){
+              console.log(option)
+              const textWidth = option['dataset']['source'][option['dataset']['source'].length-1][1]/6/2;
+              const vl = option['dataset']['source'][index+1][1]
               return vl >= textWidth ? 'white' : '#3c4654';
             }
             },
@@ -224,9 +263,12 @@
               }
             }
           ]
-        },
-        // 柱状
-        ColumnarData:{
+        }
+        Horizontal.setOption(option)
+      },
+      setColumnarData(){
+        const Columnar = echarts.init(this.$refs['Columnar']);
+        let option ={
           grid: {
             top: 80,
           },
@@ -236,24 +278,7 @@
           },
           dataset: {
             // 提供一份数据。
-            source: [
-              ['3D智能分链机器', 2000],
-              ['3D智能分链机器1',3000],
-              ['3D智能分链机器2', 2500],
-              ['3D智能分链机器3', 1000],
-              ['3D智能分链机器4', 2000],
-              ['3D智能分链机器5',3000],
-              ['3D智能分链机器6', 2500],
-              ['3D智能分链机器7', 1000],
-              ['3D智能分链机器8', 2000],
-              ['3D智能分链机器9',3000],
-              ['3D智能分链机器10', 2500],
-              ['3D智能分链机器11', 1000],
-              ['3D智能分链机器12', 2000],
-              ['3D智能分链机器13',3000],
-              ['3D智能分链机器14', 2500],
-              ['3D智能分链机器15', 1000],
-            ]
+            source:this.ColumnarData
           },
           // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
           xAxis: { 
@@ -285,27 +310,8 @@
           },
           // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
           series: [{ type: 'bar' ,itemStyle:{color:"#5aaef3"}}]
-        },
-        tableData: [
-          {title:"人工智能分链机器",pro_leader:"覃罡彤",TypeName:"个人创客",Activity:"286",ClassName:"信息与通讯学院"},
-          {title:"3D演奏智能工具",pro_leader:"袁一鸣",TypeName:"个人创客",Activity:"225",ClassName:"信息与通讯学院"},
-          {title:"物联网切割机器",pro_leader:"张晓分",TypeName:"个人创客",Activity:"169",ClassName:"中德制造"},
-          {title:"人工智能领航AI马拉松",pro_leader:"林子夏",TypeName:"创客活动",Activity:"121",ClassName:"中德制造"},
-        ]
-      };
-    },
-    methods: {
-      setCircularData(){
-        const Circular = echarts.init(this.$refs['Circular']);
-        Circular.setOption(this.CircularData)
-      },
-      setHorizontalData(){
-        const Horizontal = echarts.init(this.$refs['Horizontal']);
-        Horizontal.setOption(this.HorizontalData)
-      },
-      setColumnarData(){
-        const Columnar = echarts.init(this.$refs['Columnar']);
-        Columnar.setOption(this.ColumnarData)
+        }
+        Columnar.setOption(option)
       }
     },
     mounted() {