From 204c458aadd37ee2c0195932e7bc0bdea2dde564 Mon Sep 17 00:00:00 2001
From: xjs <1294405880@qq.com>
Date: Wed, 26 Jan 2022 16:44:31 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E4=B8=BB=E9=A1=B5=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AA=E4=BB=AA=E8=A1=A8=E7=9B=98echarts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/src/settings.js     |  88 +++++++++++++++---------------
 ruoyi-ui/src/views/index.vue | 103 +++++++++++++++++++++++++++++++++--
 2 files changed, 143 insertions(+), 48 deletions(-)

diff --git a/ruoyi-ui/src/settings.js b/ruoyi-ui/src/settings.js
index 059c74d7..2cb678fd 100644
--- a/ruoyi-ui/src/settings.js
+++ b/ruoyi-ui/src/settings.js
@@ -1,44 +1,44 @@
-module.exports = {
-  /**
-   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
-   */
-  sideTheme: 'theme-dark',
-
-  /**
-   * 是否系统布局配置
-   */
-  showSettings: false,
-
-  /**
-   * 是否显示顶部导航
-   */
-  topNav: false,
-
-  /**
-   * 是否显示 tagsView
-   */
-  tagsView: true,
-
-  /**
-   * 是否固定头部
-   */
-  fixedHeader: false,
-
-  /**
-   * 是否显示logo
-   */
-  sidebarLogo: true,
-
-  /**
-   * 是否显示动态标题
-   */
-  dynamicTitle: false,
-
-  /**
-   * @type {string | array} 'production' | ['production', 'development']
-   * @description Need show err logs component.
-   * The default is only used in the production env
-   * If you want to also use it in dev, you can pass ['production', 'development']
-   */
-  errorLog: 'production'
-}
+module.exports = {
+  /**
+   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
+   */
+  sideTheme: 'theme-light',
+
+  /**
+   * 是否系统布局配置
+   */
+  showSettings: false,
+
+  /**
+   * 是否显示顶部导航
+   */
+  topNav: true,
+
+  /**
+   * 是否显示 tagsView
+   */
+  tagsView: true,
+
+  /**
+   * 是否固定头部
+   */
+  fixedHeader: false,
+
+  /**
+   * 是否显示logo
+   */
+  sidebarLogo: true,
+
+  /**
+   * 是否显示动态标题
+   */
+  dynamicTitle: false,
+
+  /**
+   * @type {string | array} 'production' | ['production', 'development']
+   * @description Need show err logs component.
+   * The default is only used in the production env
+   * If you want to also use it in dev, you can pass ['production', 'development']
+   */
+  errorLog: 'production'
+}
diff --git a/ruoyi-ui/src/views/index.vue b/ruoyi-ui/src/views/index.vue
index 7e1628bf..ff98df03 100644
--- a/ruoyi-ui/src/views/index.vue
+++ b/ruoyi-ui/src/views/index.vue
@@ -1,33 +1,128 @@
 <template>
   <div>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <div>
+          <el-card shadow="hover" class="card" ref="renderersChart">
 
+          </el-card>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div>
+          <el-card shadow="hover" class="card">
 
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <div>
+          <el-card shadow="hover" class="card">
+
+          </el-card>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div>
+          <el-card shadow="hover" class="card">
+
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
 
+// 引入echarts
+var echarts = require('echarts/lib/echarts');
+require('echarts/lib/component/tooltip');
+require('echarts/lib/chart/gauge');
+
 
 export default {
   name: "Index",
   data() {
-    return {
-
-    };
+    return {};
   },
 
   created() {
-
   },
 
+  mounted() {
+    this.initRenderers();
+    },
+
+
   methods: {
+    initRenderers() {
+      var myDate = new Date();
+      var s = myDate.getSeconds();
+      let renderersChart = echarts.init(this.$refs.renderersChart.$el)
+      renderersChart.setOption({
+        tooltip: {
+          formatter: '单位：{a} <br/>当前 : {c}s'
+        },
+        series: [
+          {
+            name: '秒',
+            type: 'gauge',
+            progress: {
+              show: true
+            },
+            detail: {
+              valueAnimation: true,
+              formatter: '{value}'
+            },
+            data: [
+              {
+                value: s,
+                name: '单位：秒',
+              }
+            ],
+            min: 0,
+            max: 60,
+            splitNumber: 6,
+          }
+        ]
+      })
+
+      //定时获取秒数定时执行
+      setInterval(function () {
+        var myDate = new Date();
+        var s = myDate.getSeconds();
+        renderersChart.setOption({
+          series: [
+            {
+              data: [
+                {
+                  value: s
+                }
+              ]
+            },
+          ]
+        });
+      }, 1000);
+
+    },
 
   },
 
+
+
+
 };
 </script>
 
 <style scoped lang="scss">
+.card {
+  height: 410px;
+  margin: 0 auto;
+}
 
 
 </style>