注释

echarts-screen/src/components/CityRank.vue

@@ -1,38 +1,38 @@
 <template>
-    <div class="wrap-container sn-container" id="cityrank">
-      <div class="sn-content">
-        <div class="sn-title">柱状图</div>
-        <div class="sn-body">
-      <div class="wrap-container">
-        <div class="chart" id="chart_left1"></div>
-    </div>
-    </div>
+  <div class="wrap-container sn-container" id="cityrank">
+    <div class="sn-content">
+      <div class="sn-title">柱状图</div>
+      <div class="sn-body">
+        <div class="wrap-container">
+          <div class="chart" id="chart_left1"></div>
+        </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
-    import screenfull from "screenfull";
+import screenfull from "screenfull";
 
-    export default {
-        name: "CityRank",
-        data() {
-            return {
-                fullscreen: false
-            }
-        },
-        mounted() {
-            this.getEchartLeft1();
-        },
-        methods: {
-            getEchartLeft1() {
-                // 实例化对象
-                let myChart = echarts.init(document.getElementById('chart_left1'));
-                let charts = { // 按顺序排列从大到小
-                    cityList: ['湖北', '香港', '广东', '湖南', '四川', '浙江', '上海'],
-                    cityData: [68149, 8300, 2035, 1020, 843, 1300, 1473],
-                    function(p) {
-                        return p.name + ":" + this.cityData(p.value);
+export default {
+  name: "CityRank",
+  data() {
+    return {
+      fullscreen: false
+    }
+  },
+  mounted() {
+    this.getEchartLeft1();
+  },
+  methods: {
+    getEchartLeft1() {
+      // 实例化对象
+      let myChart = echarts.init(document.getElementById('chart_left1'));
+      let charts = { // 按顺序排列从大到小
+        cityList: ['湖北', '香港', '广东', '湖南', '四川', '浙江', '上海'],
+        cityData: [68149, 8300, 2035, 1020, 843, 1300, 1473],
+        function(p) {
+          return p.name + ":" + this.cityData(p.value);
         }
       }
 
@@ -73,47 +73,48 @@
 
       // 指定配置和数据
       let option = {
-          toolbox: {
-              feature: {
-                  mytool: {
-                      show: true,
-                      title: "全屏",
-                      icon: 'path://M181 357.5V181.2h176.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c0-14.3-11.6-25.9-25.9-25.9H118c-11 0-20 9-20 20v239.4c0 14.3 11.6 25.9 25.9 25.9H155c14.4-0.1 26-11.7 26-26.1zM668.6 181.2H845v176.4c0 14.3 11.6 25.9 25.9 25.9H902c14.3 0 25.9-11.6 25.9-25.9V118.2c0-11-9-20-20-20H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 26 25.9 26zM357.4 845.2H181V668.8c0-14.3-11.6-25.9-25.9-25.9H124c-14.3 0-25.9 11.6-25.9 25.9v239.4c0 11 9 20 20 20h239.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c-0.1-14.4-11.7-26-26-26zM845 668.8v176.4H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 25.9 25.9 25.9H908c11 0 20-9 20-20V668.8c0-14.3-11.6-25.9-25.9-25.9H871c-14.4 0-26 11.6-26 25.9z',
-                      onclick: function () {
-                          const element = document.getElementById('chart_left1');
-                          if (!screenfull.isEnabled) {//判断是否支持全屏
-                              this.$message({
-                                  message: '您的浏览器暂时不支持全屏切换',
-                                  type: 'warning'
-                              })
-                              return false
-                          }
-                          screenfull.toggle(element)
+        toolbox: {
+          feature: {
+            mytool: {
+              show: true,
+              title: "全屏",
+              icon: 'path://M181 357.5V181.2h176.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c0-14.3-11.6-25.9-25.9-25.9H118c-11 0-20 9-20 20v239.4c0 14.3 11.6 25.9 25.9 25.9H155c14.4-0.1 26-11.7 26-26.1zM668.6 181.2H845v176.4c0 14.3 11.6 25.9 25.9 25.9H902c14.3 0 25.9-11.6 25.9-25.9V118.2c0-11-9-20-20-20H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 26 25.9 26zM357.4 845.2H181V668.8c0-14.3-11.6-25.9-25.9-25.9H124c-14.3 0-25.9 11.6-25.9 25.9v239.4c0 11 9 20 20 20h239.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c-0.1-14.4-11.7-26-26-26zM845 668.8v176.4H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 25.9 25.9 25.9H908c11 0 20-9 20-20V668.8c0-14.3-11.6-25.9-25.9-25.9H871c-14.4 0-26 11.6-26 25.9z',
+              onclick: function () {
+                const element = document.getElementById('chart_left1');
+                if (!screenfull.isEnabled) {
+                  //判断是否支持全屏
+                  this.$message({
+                    message: '您的浏览器暂时不支持全屏切换',
+                    type: 'warning'
+                  })
+                  return false
+                }
+                screenfull.toggle(element)
 
-                      },
-                  }
               },
+            }
           },
-          color: color,
-          tooltip: {
-              trigger: 'item',
+        },
+        color: color,
+        tooltip: {
+          trigger: 'item',
+        },
+        grid: {
+          borderWidth: 0,
+          top: '5%',
+          left: '2%',
+          right: '2%',
+          bottom: '0%',
+          containLabel: true
+        },
+        xAxis: [{
+          type: 'value',
+          axisTick: {
+            show: false
           },
-          grid: {
-              borderWidth: 0,
-              top: '5%',
-              left: '2%',
-              right: '2%',
-              bottom: '0%',
-              containLabel: true
+          axisLine: {
+            show: false
           },
-          xAxis: [{
-              type: 'value',
-              axisTick: {
-                  show: false
-              },
-              axisLine: {
-                  show: false
-              },
           splitLine: {
             show: false
           },
@@ -207,6 +208,7 @@
 .sn-container {
   width: 99%;
   height: 99%;
+
   .chart {
     height: 99%;
     width: 99%;

echarts-screen/src/components/bgAnimation/index.vue

@@ -1,9 +1,4 @@
-<!--
- 描述: 登录界面背景图动画
- 作者: Jack Chen
- 日期: 2020-04-18
--->
-
+//登录首页背景样式
 <template>
   <ul class="slide-box">
     <li></li>

echarts-screen/src/components/toast/index.js

@@ -1,8 +1,3 @@
-/*
- * 描述: 注册全局消息提示框组件
- * 作者: Jack Chen
- * 日期: 2020-04-18
- */
 
 import Vue from 'vue'
 import Toast from './index.vue'

echarts-screen/src/components/toast/index.vue

@@ -1,9 +1,4 @@
-<!--
- 描述: 消息提示框模板
- 作者: Jack Chen
- 日期: 2020-04-18
--->
-
+//用户登录验证失败弹窗样式
 <template>
   <transition name="fade">
     <div class="toast-container" v-if="visible">  
@@ -94,7 +89,7 @@ export default {
     &.error {
       background: #fef0f0;
       border: 1px solid #fbdfdf;
-      color: #f56c6c;
+      color: #f60bcf;
     }
     .close {
       cursor: pointer;

echarts-screen/src/components/wordCloud.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="wrap-container sn-container" id="wordcloud">
     <div class="sn-content">
-<!--      <div class="sn-title"></div>-->
       <div class="sn-body">
     <div class="wrap-container">
     <div class="chart" id="chart_right1"></div>
@@ -81,6 +80,7 @@
               fontSize: 20,
             }
           },
+          //切换词云
           data: [{
             name: '钟南山',
             value: 810

echarts-screen/src/main.js

@@ -17,6 +17,7 @@ Vue.use(screenfull)
 
 Vue.config.productionTip = false
 
+//自定义弹窗组件引用
 Vue.prototype.$Toast = Toast
 
 

echarts-screen/src/router/index.js

@@ -1,11 +1,12 @@
+//路由管理器
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Brand from "@/views/Brand";
 
 Vue.use(VueRouter)
 
 const routes = [
     {
+        //运行后访问的首页
         path: '/',
         name: 'Login',
         component: () => import('@/views/Login'),
@@ -14,7 +15,7 @@ const routes = [
         }
     },
     {
-        //用户密码正确后跳转的页面
+        //用户名密码正确后跳转的页面
         path: '/Brand',
         name: 'Brand',
         component: () => import('@/views/Brand')

echarts-screen/src/views/Login.vue

@@ -101,7 +101,6 @@ export default {
         this.$Toast({
           content: '请输入正确的用户名和密码',
           type: 'error',
-          // message:'用户名或密码错误，登陆失败!'
           hasClose: true
         })
       }