前段页面修改

src/views/wel/index.vue

@@ -23,9 +23,9 @@
           <span class="tips">{{item.tips}}</span>
         </router-link>
       </div>
-    </div>
-    <h3>活动作品数统计</h3>
-    <div id="myChart" :style="{width: '100%', height: '600px'}">
+      <h3>活动作品数统计</h3>
+      <div id="myChart" :style="{width: '100%', height: '600px'}">
+      </div>
     </div>
   </div>
 </template>
@@ -217,161 +217,161 @@
       this.drawLine();
     },
     methods: {
-        drawLine() {
-/*            activeTotal().then(res => {
-            const titleList = [];
-            const countList = [];
-            res.data.data.forEach(ele => {
-              titleList.push(ele.name);
-              countList.push(ele.value);
-            })
-            // 基于准备好的dom，初始化echarts实例
-            let myChart = echarts.init(document.getElementById('myChart'))
-            // 绘制图表
-            myChart.setOption({
-              title: {
-                text: '活动作品统计'
-              },
-              tooltip: {},
-              xAxis: {
-                data: titleList,
-                name: "活动名称",
-                axisLabel : {//坐标轴刻度标签的相关设置。
-                  formatter : function(params){
-                    var newParamsName = "";// 最终拼接成的字符串
-                    var paramsNameNumber = params.length;// 实际标签的个数
-                    var provideNumber = 6;// 每行能显示的字的个数
-                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
-                    // 条件等同于rowNumber>1
-                    if (paramsNameNumber > provideNumber) {
+      drawLine() {
+        /*            activeTotal().then(res => {
+                    const titleList = [];
+                    const countList = [];
+                    res.data.data.forEach(ele => {
+                      titleList.push(ele.name);
+                      countList.push(ele.value);
+                    })
+                    // 基于准备好的dom，初始化echarts实例
+                    let myChart = echarts.init(document.getElementById('myChart'))
+                    // 绘制图表
+                    myChart.setOption({
+                      title: {
+                        text: '活动作品统计'
+                      },
+                      tooltip: {},
+                      xAxis: {
+                        data: titleList,
+                        name: "活动名称",
+                        axisLabel : {//坐标轴刻度标签的相关设置。
+                          formatter : function(params){
+                            var newParamsName = "";// 最终拼接成的字符串
+                            var paramsNameNumber = params.length;// 实际标签的个数
+                            var provideNumber = 6;// 每行能显示的字的个数
+                            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
+                            // 条件等同于rowNumber>1
+                            if (paramsNameNumber > provideNumber) {
 
-                      for (var p = 0; p < rowNumber; p++) {
-                        var tempStr = "";// 表示每一次截取的字符串
-                        var start = p * provideNumber;// 开始截取的位置
-                        var end = start + provideNumber;// 结束截取的位置
-                        // 此处特殊处理最后一行的索引值
-                        if (p == rowNumber - 1) {
-                          // 最后一次不换行
-                          tempStr = params.substring(start, paramsNameNumber);
-                        } else {
-                          // 每一次拼接字符串并换行
-                          tempStr = params.substring(start, end) + "\n";
-                        }
-                        newParamsName += tempStr;// 最终拼成的字符串
-                      }
+                              for (var p = 0; p < rowNumber; p++) {
+                                var tempStr = "";// 表示每一次截取的字符串
+                                var start = p * provideNumber;// 开始截取的位置
+                                var end = start + provideNumber;// 结束截取的位置
+                                // 此处特殊处理最后一行的索引值
+                                if (p == rowNumber - 1) {
+                                  // 最后一次不换行
+                                  tempStr = params.substring(start, paramsNameNumber);
+                                } else {
+                                  // 每一次拼接字符串并换行
+                                  tempStr = params.substring(start, end) + "\n";
+                                }
+                                newParamsName += tempStr;// 最终拼成的字符串
+                              }
 
-                    } else {
-                      // 将旧标签的值赋给新标签
-                      newParamsName = params;
-                    }
-                    //将最终的字符串返回
-                    return newParamsName
-                  }
+                            } else {
+                              // 将旧标签的值赋给新标签
+                              newParamsName = params;
+                            }
+                            //将最终的字符串返回
+                            return newParamsName
+                          }
 
-                }
-              },
-              yAxis: {},
-              series: [{
-                name: '作品数',
-                type: 'bar',
-                data: countList
-              }],
-              grid:{//直角坐标系内绘图网格
-                bottom:"40%" //
-              },
+                        }
+                      },
+                      yAxis: {},
+                      series: [{
+                        name: '作品数',
+                        type: 'bar',
+                        data: countList
+                      }],
+                      grid:{//直角坐标系内绘图网格
+                        bottom:"40%" //
+                      },
 
-            });
-          });*/
-          /*activeTotal().then(res => {
-            let myChart = echarts.init(document.getElementById('myChart'))
-            myChart.setOption({
-              //backgroundColor: "#fff",
-              title: {
-                text: '活动作品统计',
-                left: 'center',
-                top: 20,
-                textStyle: {
+                    });
+                  });*/
+        /*activeTotal().then(res => {
+          let myChart = echarts.init(document.getElementById('myChart'))
+          myChart.setOption({
+            //backgroundColor: "#fff",
+            title: {
+              text: '活动作品统计',
+              left: 'center',
+              top: 20,
+              textStyle: {
+                color: '#000'
+              }
+            },
+            tooltip: {
+              trigger: 'item'
+            },
+            visualMap: {
+              show: false,
+              min: 80,
+              max: 600,
+              inRange: {
+                colorLightness: [0, 1]
+              }
+            },
+            series: [
+              {
+                name: '作品数',
+                type: 'pie',
+                radius: '55%',
+                center: ['50%', '50%'],
+                data: res.data.data
+                .sort(function (a, b) {
+                  return a.value - b.value;
+                }),
+                roseType: 'radius',
+                label: {
                   color: '#000'
-                }
-              },
-              tooltip: {
-                trigger: 'item'
-              },
-              visualMap: {
-                show: false,
-                min: 80,
-                max: 600,
-                inRange: {
-                  colorLightness: [0, 1]
-                }
-              },
-              series: [
-                {
-                  name: '作品数',
-                  type: 'pie',
-                  radius: '55%',
-                  center: ['50%', '50%'],
-                  data: res.data.data
-                  .sort(function (a, b) {
-                    return a.value - b.value;
-                  }),
-                  roseType: 'radius',
-                  label: {
+                },
+                labelLine: {
+                  lineStyle: {
                     color: '#000'
                   },
-                  labelLine: {
-                    lineStyle: {
-                      color: '#000'
-                    },
-                    smooth: 0.2,
-                    length: 10,
-                    length2: 20
-                  },
+                  smooth: 0.2,
+                  length: 10,
+                  length2: 20
+                },
+                itemStyle: {
+                  color: '#c23531',
+                  shadowBlur: 200,
+                  shadowColor: 'rgba(0, 0, 0, 0.5)'
+                },
+                animationType: 'scale',
+                animationEasing: 'elasticOut',
+                animationDelay: function () {
+                  return Math.random() * 200;
+                }
+              }
+            ]
+          })
+        })*/
+        activeTotal().then(res => {
+          var myChart = echarts.init(document.getElementById("myChart"));
+          myChart.setOption({
+            backgroundColor: '#fff',
+            title: {
+              left: 'center'
+            },
+            tooltip: {
+              trigger: 'item'
+            },
+            // legend: {
+            //   orient: 'vertical',
+            //   left: 'left'
+            // },
+            series: [
+              {
+                name: '作品数',
+                type: 'pie',
+                radius: '50%',
+                data: res.data.data,
+                emphasis: {
                   itemStyle: {
-                    color: '#c23531',
-                    shadowBlur: 200,
+                    shadowBlur: 10,
+                    shadowOffsetX: 0,
                     shadowColor: 'rgba(0, 0, 0, 0.5)'
-                  },
-                  animationType: 'scale',
-                  animationEasing: 'elasticOut',
-                  animationDelay: function () {
-                    return Math.random() * 200;
                   }
                 }
-              ]
-            })
-          })*/
-         activeTotal().then(res => {
-           var myChart = echarts.init(document.getElementById("myChart"));
-           myChart.setOption({
-             backgroundColor: '#fff',
-             title: {
-               left: 'center'
-             },
-             tooltip: {
-               trigger: 'item'
-             },
-             // legend: {
-             //   orient: 'vertical',
-             //   left: 'left'
-             // },
-             series: [
-               {
-                 name: '作品数',
-                 type: 'pie',
-                 radius: '50%',
-                 data: res.data.data,
-                 emphasis: {
-                   itemStyle: {
-                     shadowBlur: 10,
-                     shadowOffsetX: 0,
-                     shadowColor: 'rgba(0, 0, 0, 0.5)'
-                   }
-                 }
-               }
-             ],
-           })
-         })
+              }
+            ],
+          })
+        })
       },
       init() {
         censusAllTotal().then(res => {
@@ -395,18 +395,22 @@
   .front-page {
     padding-top: 30px;
     padding-left: 15px;
+
     h3 {
       font-size: 18px;
       color: #353535;
       font-weight: bold;
       margin-bottom: 15px;
     }
+
     .data-summary {
       margin-bottom: 30px;
+
       .list-item {
         display: flex;
         justify-content: center;
         align-items: center;
+
         .item {
           flex: 1;
           display: flex;
@@ -416,6 +420,7 @@
           height: 200px;
           color: #fff;
           border-radius: 10px;
+
           &:nth-child(1) {
             background-color: #4065E0;
           }