普通员工页面：CODE1-10进度、审计开项完成率

ruoyi-ui/package.json

@@ -36,11 +36,13 @@
     "url": "https://gitee.com/y_project/RuoYi-Vue.git"
   },
   "dependencies": {
+    "@jiaminghi/charts": "^0.2.18",
+    "@jiaminghi/data-view": "^2.10.0",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.28.1",
     "clipboard": "2.0.8",
     "core-js": "3.37.1",
-    "echarts": "5.4.0",
+    "echarts": "^5.4.0",
     "element-ui": "2.15.8",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",

ruoyi-ui/src/main.js

@@ -37,6 +37,8 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
+import dataV from '@jiaminghi/data-view'
+import echarts from '@/api/rc/echarts.min.js'
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -48,6 +50,7 @@ Vue.prototype.selectDictLabel = selectDictLabel
 Vue.prototype.selectDictLabels = selectDictLabels
 Vue.prototype.download = download
 Vue.prototype.handleTree = handleTree
+Vue.prototype.echarts = echarts
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag)
@@ -61,6 +64,7 @@ Vue.component('ImagePreview', ImagePreview)
 Vue.use(directive)
 Vue.use(plugins)
 Vue.use(VueMeta)
+Vue.use(dataV)
 DictData.install()
 
 /**

ruoyi-ui/src/views/home2.vue

@@ -32,11 +32,11 @@
     <div class="echartsBox">
       <!-- 柱状图 -->
       <div class="echartsBox_Barchart">
-        这是柱状图
+        <dv-capsule-chart :config="capsuleConfig" style="width:600px;height:400px;color:#000;font-weight:bold;" />
       </div>
       <!-- 饼图 -->
       <div class="echartsBox_Piechart">
-        这是饼图
+        <dv-charts :option="pieOption" style="width:600px;height:400px"/>
       </div>
     </div>
   </div>
@@ -45,6 +45,95 @@
 
 <script>
 export default {
+  data() {
+    return {
+      capsuleConfig: {
+        data: [
+          {
+            name: 'CODE 1',
+            value: 67
+          },
+          {
+            name: 'CODE 2',
+            value: 67
+          },
+          {
+            name: 'CODE 3',
+            value: 67
+          },
+          {
+            name: 'CODE 4',
+            value: 67
+          },
+          {
+            name: 'CODE 5',
+            value: 23
+          },
+          {
+            name: 'CODE 6',
+            value: 55
+          },
+          {
+            name: 'CODE 7',
+            value: 98
+          },
+          {
+            name: 'CODE 8',
+            value: 98
+          },
+          {
+            name: 'CODE 9',
+            value: 98
+          },
+          {
+            name: 'CODE 10',
+            value: 98
+          },
+        ],
+        unit: '%',
+        showValue: true
+      },
+      pieOption: {
+        title: {
+          text: '审计开项完成率'
+        },
+        series: [
+          {
+            type: 'gauge',
+            startAngle: -Math.PI / 2,
+            endAngle: Math.PI * 1.5,
+            arcLineWidth: 25,
+            data: [
+              { name: 'itemA', value: 75, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }
+            ],
+            axisLabel: {
+              show: false
+            },
+            axisTick: {
+              show: false
+            },
+            pointer: {
+              show: false
+            },
+            dataItemStyle: {
+              lineCap: 'round'
+            },
+            details: {
+              show: true,
+              formatter: '{value}%',
+              style: {
+                fill: '#1ed3e5',
+                fontSize: 35
+              }
+            }
+          }
+        ]
+      },
+    }
+  },
+  mounted() {
+
+  }
 }
 </script>
 
@@ -138,7 +227,7 @@ export default {
 
   .echartsBox{
     display: flex;
-    justify-content: space-around;
-    margin-top: 90px;
+    justify-content: space-between;
+    margin-top: 30px;
   }
 </style>

ruoyi-ui/src/views/index.vue

@@ -15,7 +15,6 @@
     },
     components: { home1,home2 },
     mounted() {
-      console.log(this.$store.state.user.roles)
       let type = '2';
       let roles = this.$store.state.user.roles;
       for (let i = 0; i < roles.length; i++) {