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

ruoyi-ui/src/settings.js

@@ -2,7 +2,7 @@ module.exports = {
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
    */
-  sideTheme: 'theme-dark',
+  sideTheme: 'theme-light',
 
   /**
    * 是否系统布局配置
@@ -12,7 +12,7 @@ module.exports = {
   /**
    * 是否显示顶部导航
    */
-  topNav: false,
+  topNav: true,
 
   /**
    * 是否显示 tagsView

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>