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

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 id="barChart" style="width: 600px;height: 400px;"></div>
       </div>
       <!-- 饼图 -->
       <div class="echartsBox_Piechart">
-        <dv-charts :option="pieOption" style="width:600px;height:400px"/>
+        <div id="pieChart" style="width: 600px;height: 400px;"></div>
       </div>
     </div>
   </div>
@@ -59,88 +59,8 @@ export default {
       preAuditTimeString2: null,
       auditTimeCountDown: null,
       preAuditTimeCountDown: null,
-      capsuleConfig: {
-        data: [
-          {
-            name: 'CODE 0',
-            value: null
-          },
-          {
-            name: 'CODE 1',
-            value: null
-          },
-          {
-            name: 'CODE 2',
-            value: null
-          },
-          {
-            name: 'CODE 3',
-            value: null
-          },
-          {
-            name: 'CODE 4',
-            value: null
-          },
-          {
-            name: 'CODE 5',
-            value: null
-          },
-          {
-            name: 'CODE 6',
-            value: null
-          },
-          {
-            name: 'CODE 7',
-            value: null
-          },
-          {
-            name: 'CODE 8',
-            value: null
-          },
-          {
-            name: 'CODE 9',
-            value: null
-          },
-        ],
-        unit: '%',
-        showValue: true
-      },
-      pieOption: {
-        title: {
-          text: '审计开项完成率'
-        },
-        series: [
-          {
-            type: 'gauge',
-            startAngle: -Math.PI / 2,
-            endAngle: Math.PI * 1.5,
-            arcLineWidth: 25,
-            data: [
-              { name: 'itemA', value: 0, 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
-              }
-            }
-          }
-        ]
-      },
+      barChart: null,
+      pieChart: null,
     }
   },
   created() {
@@ -177,92 +97,114 @@ export default {
     getBar() {
       getBar().then(response => {
         let data = response.data;
-        this.capsuleConfig = {
-          data: [
-            {
-              name: 'CODE 0',
-              value: Math.floor(data.code0 * 100)
-            },
-            {
-              name: 'CODE 1',
-              value: Math.floor(data.code1 * 100)
-            },
-            {
-              name: 'CODE 2',
-              value: Math.floor(data.code2 * 100)
-            },
-            {
-              name: 'CODE 3',
-              value: Math.floor(data.code3 * 100)
-            },
-            {
-              name: 'CODE 4',
-              value: Math.floor(data.code4 * 100)
-            },
-            {
-              name: 'CODE 5',
-              value: Math.floor(data.code5 * 100)
-            },
-            {
-              name: 'CODE 6',
-              value: Math.floor(data.code6 * 100)
-            },
-            {
-              name: 'CODE 7',
-              value: Math.floor(data.code7 * 100)
-            },
-            {
-              name: 'CODE 8',
-              value: Math.floor(data.code8 * 100)
+        this.barChart = this.echarts.init(document.getElementById('barChart'));
+        this.barChart.setOption({
+          tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+              type: 'shadow'
             },
+          },
+          yAxis: {
+            type: 'category',
+            data: ['CODE 0', 'CODE 1', 'CODE 2', 'CODE 3', 'CODE 4', 'CODE 5', 'CODE 6', 'CODE 7', 'CODE 8', 'CODE 9'],
+            axisTick: {
+              alignWithLabel: true
+            }
+          },
+          xAxis: {
+            type: 'value',
+            name: '%',
+          },
+          series: [
             {
-              name: 'CODE 9',
-              value: Math.floor(data.code9 * 100)
-            },
-          ],
-          unit: '%',
-          showValue: true
-        };
+              data: [
+                {value: data.code0 * 100, itemStyle: {color: '#5470C6'}},
+                {value: data.code1 * 100, itemStyle: {color: '#91CC75'}},
+                {value: data.code2 * 100, itemStyle: {color: '#FAC858'}},
+                {value: data.code3 * 100, itemStyle: {color: '#EE6666'}},
+                {value: data.code4 * 100, itemStyle: {color: '#73C0DE'}},
+                {value: data.code5 * 100, itemStyle: {color: '#3BA272'}},
+                {value: data.code6 * 100, itemStyle: {color: '#FC8452'}},
+                {value: data.code7 * 100, itemStyle: {color: '#9A60B4'}},
+                {value: data.code8 * 100, itemStyle: {color: '#5470C6'}},
+                {value: data.code9 * 100, itemStyle: {color: '#91CC75'}},
+              ],
+              type: 'bar',
+            }
+          ]
+        });
       });
     },
     getPie() {
       getPie().then(response => {
-        this.pieOption = {
-          title: {
-            text: '审计开项完成率'
-          },
+        let data = response.data;
+        this.pieChart = this.echarts.init(document.getElementById('pieChart'));
+        this.pieChart.setOption({
           series: [
             {
+              name: 'Pressure',
               type: 'gauge',
-              startAngle: -Math.PI / 2,
-              endAngle: Math.PI * 1.5,
-              arcLineWidth: 25,
-              data: [
-                { name: 'itemA', value: Math.floor(response.data * 100), gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }
-              ],
-              axisLabel: {
+              // startAngle: 360,
+              // endAngle: 0,
+              progress: {
+                show: true,
+                width: 30,
+                roundCap: true,
+                itemStyle: {
+                  color: '#91CC75',
+                //   // 渐变色
+                //   color: {
+                //     type: 'linear',
+                //     x: 1,
+                //     y: 1,
+                //     x2: 0,
+                //     y2: 1,
+                //     colorStops: [
+                //       {
+                //         offset: 0,
+                //         color: '#91CC75' // 0% 处的颜色
+                //       },
+                //       {
+                //         offset: 1,
+                //         color: '#5470C6' // 100% 处的颜色
+                //       }
+                //     ],
+                //     global: false // 缺省为 false
+                //   }
+                }
+              },
+              pointer: {
+                show: false,
+              },
+              splitLine: {
                 show: false
               },
               axisTick: {
                 show: false
               },
-              pointer: {
+              axisLabel: {
                 show: false
               },
-              dataItemStyle: {
-                lineCap: 'round'
+              axisLine: {
+                lineStyle: {
+                  width: 30,
+                },
+                roundCap: true,
               },
-              details: {
-                show: true,
-                formatter: '{value}%',
-                style: {
-                  fill: '#1ed3e5',
-                  fontSize: 35
+              detail: {
+                valueAnimation: true,
+                formatter: '{value}%'
+              },
+              data: [
+                {
+                  value: Math.floor(response.data * 100),
+                  name: '审计开项完成率'
                 }
-              }
+              ]
             }
           ]
-        };
+        });
       });
     },
     getString1(date) {
@@ -367,6 +309,5 @@ export default {
   .echartsBox{
     display: flex;
     justify-content: space-between;
-    margin-top: 30px;
   }
 </style>