1、主页实现一个仪表盘echarts

ruoyi-ui/src/settings.js

@@ -1,44 +1,44 @@
-module.exports = {
+module.exports = {
-  /**
+  /**
-   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
+   * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
-   */
+   */
-  sideTheme: 'theme-dark',
+  sideTheme: 'theme-light',
-
+
-  /**
+  /**
-   * 是否系统布局配置
+   * 是否系统布局配置
-   */
+   */
-  showSettings: false,
+  showSettings: false,
-
+
-  /**
+  /**
-   * 是否显示顶部导航
+   * 是否显示顶部导航
-   */
+   */
-  topNav: false,
+  topNav: true,
-
+
-  /**
+  /**
-   * 是否显示 tagsView
+   * 是否显示 tagsView
-   */
+   */
-  tagsView: true,
+  tagsView: true,
-
+
-  /**
+  /**
-   * 是否固定头部
+   * 是否固定头部
-   */
+   */
-  fixedHeader: false,
+  fixedHeader: false,
-
+
-  /**
+  /**
-   * 是否显示logo
+   * 是否显示logo
-   */
+   */
-  sidebarLogo: true,
+  sidebarLogo: true,
-
+
-  /**
+  /**
-   * 是否显示动态标题
+   * 是否显示动态标题
-   */
+   */
-  dynamicTitle: false,
+  dynamicTitle: false,
-
+
-  /**
+  /**
-   * @type {string | array} 'production' | ['production', 'development']
+   * @type {string | array} 'production' | ['production', 'development']
-   * @description Need show err logs component.
+   * @description Need show err logs component.
-   * The default is only used in the production env
+   * The default is only used in the production env
-   * If you want to also use it in dev, you can pass ['production', 'development']
+   * If you want to also use it in dev, you can pass ['production', 'development']
-   */
+   */
-  errorLog: 'production'
+  errorLog: 'production'
-}
+}

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>