diff --git a/mindinsight/ui/src/assets/images/occupy.svg b/mindinsight/ui/src/assets/images/occupy.svg
new file mode 100644
index 0000000000000000000000000000000000000000..5964b1e41f9ec729a55ecbaf714147c7aa393c28
--- /dev/null
+++ b/mindinsight/ui/src/assets/images/occupy.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="197px" height="197px" viewBox="0 0 197 197" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>设备占比</title>
+    <desc>Created with Sketch.</desc>
+    <g id="硬件资源可视-特性文档" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="设备占比" fill="#FA9841" fill-rule="nonzero">
+            <path d="M98.4375,0.1375 C44.1479091,0.1375 0.1375,44.1479091 0.1375,98.4375 C0.1375,152.727091 44.1479091,196.7375 98.4375,196.7375 C152.727091,196.7375 196.7375,152.727091 196.7375,98.4375 C196.682379,44.1707574 152.704243,0.192621163 98.4375,0.1375 Z M103.4375,15.4375 C121.974914,16.606052 139.582848,23.9661683 153.4375,36.3375 L103.4375,86.3375 L103.4375,15.3375 L103.4375,15.4375 Z M15.1374914,98.4375 C15.2134747,54.4129965 49.495318,18.0295843 93.4375,15.3375 L93.4375,98.4375 C93.46687,99.7540728 94.0043749,101.008251 94.9375,101.9375 L153.637491,160.6375 C129.148862,182.422768 94.1517029,187.800527 64.2521242,174.372702 C34.3525455,160.944877 15.1226403,131.21388 15.1374914,98.4375 Z M160.7375,153.6375 L105.5375,98.4375 L160.7375,43.2375 C188.850198,74.6684524 188.850198,122.206548 160.7375,153.6375 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/mindinsight/ui/src/views/train-manage/hardware-visual.vue b/mindinsight/ui/src/views/train-manage/hardware-visual.vue
index f77d4531e6255c4ef57789104374774d40c74f14..8eec65d2821695ca52818e7a20f968bdc42c2cf1 100644
--- a/mindinsight/ui/src/views/train-manage/hardware-visual.vue
+++ b/mindinsight/ui/src/views/train-manage/hardware-visual.vue
@@ -580,8 +580,10 @@ export default {
     dealChartData(chart, data) {
       if (data.others === 0) {
         chart.legend = ['used', 'available'];
+        this.pieColorArr = ['#5e7ce0', '#a6dd82'];
       } else {
         chart.legend = ['used', 'others', 'available'];
+        this.pieColorArr = ['#5e7ce0', '#ccc', '#a6dd82'];
       }
       chart.data = chart.legend.map((val) => {
         return {
@@ -799,12 +801,13 @@ export default {
         .cl-chip-wrap {
           height: calc(100% - 36px);
           overflow: auto;
-          .available-fail{
+          .available-fail {
             display: inline-block;
             width: 12px;
             height: 12px;
             border-radius: 12px;
-            background: #ffaa00;
+            background-image: url('../../assets/images/occupy.svg');
+            background-size: 100% 100%;
           }
           .el-icon-success:before {
             color: #57d7ac;