diff --git a/src/components/tools/ShowAnnouncement.vue b/src/components/tools/ShowAnnouncement.vue
index 8be8488..42dbfa7 100644
--- a/src/components/tools/ShowAnnouncement.vue
+++ b/src/components/tools/ShowAnnouncement.vue
@@ -4,18 +4,16 @@ import xss from "xss"
     :title="title"
     :width="modelStyle.width"
     :visible="visible"
-    :bodyStyle ="bodyStyle"
+    :bodyStyle="bodyStyle"
     :switchFullscreen="switchFullscreen"
     @cancel="handleCancel"
-   >
+  >
     <template slot="footer">
       <a-button key="back" @click="handleCancel">关闭</a-button>
-      <a-button v-if="record.openType==='url'" type="primary" @click="toHandle">去处理</a-button>
+      <a-button v-if="record.openType === 'url'" type="primary" @click="toHandle">去处理</a-button>
     </template>
     <a-card class="daily-article" :loading="loading">
-      <a-card-meta
-        :title="record.titile"
-        :description="'发布人：'+record.sender + ' 发布时间： ' + record.sendTime">
+      <a-card-meta :title="record.titile" :description="'发布人：' + record.sender + ' 发布时间： ' + record.sendTime">
       </a-card-meta>
       <a-divider />
       <span v-html="record.msgContent" class="article-content"></span>
@@ -24,133 +22,133 @@ import xss from "xss"
 </template>
 
 <script>
-  import {getUserList} from '@/api/api'
-  import xss from 'xss'
-  export default {
-    name: "SysAnnouncementModal",
-    components: {
-    },
-    data () {
-      return {
-        title:"通知消息",
-        record: {},
-        labelCol: {
-          xs: { span: 24 },
-          sm: { span: 5 },
-        },
-        wrapperCol: {
-          xs: { span: 24 },
-          sm: { span: 16 },
-        },
-        visible: false,
-        switchFullscreen: true,
-        loading: false,
-        bodyStyle:{
-          padding: "0",
-          height:(window.innerHeight*0.8)+"px",
-          "overflow-y":"auto",
-
-        },
-        modelStyle:{
-          width: '60%',
-          style: { top: '20px' },
-          fullScreen: false
-        }
-      }
-    },
-    created () {
-    },
-    methods: {
-      detail (record) {
-        //update-begin---author:wangshuai ---date:20220107  for：将其它页面传递过来的用户名改成用户真实姓名
-        if(record.sender){
-          getUserList({"username":record.sender}).then((res) =>{
-            if(res.success && res.result.records.length>0){
-                record.sender = res.result.records[0].realname
-            }
-          })
-        }
-        //update-end---author:wangshuai ---date:20220107  for：将其它页面传递过来的用户名改成用户真实姓名
-        this.visible = true;
-        //update-begin-author:taoyan date:2022-7-14 for: VUEN-1702 【禁止问题】sql注入漏洞
-        if(record.msgContent){
-          record.msgContent = xss(record.msgContent)
-        }
-        //update-end-author:taoyan date:2022-7-14 for: VUEN-1702 【禁止问题】sql注入漏洞
-        this.record = record;
+import { getUserList } from '@/api/api'
+import xss from 'xss'
+export default {
+  name: 'SysAnnouncementModal',
+  components: {},
+  data() {
+    return {
+      title: '通知消息',
+      record: {},
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 5 },
       },
-      handleCancel () {
-        this.visible = false;
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 },
       },
-      /** 切换全屏显示 */
-      handleClickToggleFullScreen() {
-        let mode = !this.modelStyle.fullScreen
-        if (mode) {
-          this.modelStyle.width = '100%'
-          this.modelStyle.style.top = '20px'
-        } else {
-          this.modelStyle.width = '60%'
-          this.modelStyle.style.top = '50px'
-        }
-        this.modelStyle.fullScreen = mode
+      visible: false,
+      switchFullscreen: true,
+      loading: false,
+      bodyStyle: {
+        padding: '0',
+        height: window.innerHeight * 0.8 + 'px',
+        'overflow-y': 'auto',
       },
-      toHandle(){
-        if(this.record.openType==='url'){
-          this.visible = false;
-          //链接跳转
-          this.$router.push({path: this.record.openPage})
-        }
+      modelStyle: {
+        width: '60%',
+        style: { top: '20px' },
+        fullScreen: false,
       },
     }
-  }
+  },
+  created() {},
+  methods: {
+    detail(record) {
+      //update-begin---author:wangshuai ---date:20220107  for：将其它页面传递过来的用户名改成用户真实姓名
+      if (record.sender) {
+        getUserList({ username: record.sender }).then((res) => {
+          if (res.success && res.result.records.length > 0) {
+            record.sender = res.result.records[0].realname
+          }
+        })
+      }
+      //update-end---author:wangshuai ---date:20220107  for：将其它页面传递过来的用户名改成用户真实姓名
+      this.visible = true
+      //update-begin-author:taoyan date:2022-7-14 for: VUEN-1702 【禁止问题】sql注入漏洞
+      if (record.msgContent) {
+        record.msgContent = xss(record.msgContent)
+      }
+      //update-end-author:taoyan date:2022-7-14 for: VUEN-1702 【禁止问题】sql注入漏洞
+      this.record = record
+    },
+    handleCancel() {
+      this.visible = false
+    },
+    /** 切换全屏显示 */
+    handleClickToggleFullScreen() {
+      let mode = !this.modelStyle.fullScreen
+      if (mode) {
+        this.modelStyle.width = '100%'
+        this.modelStyle.style.top = '20px'
+      } else {
+        this.modelStyle.width = '60%'
+        this.modelStyle.style.top = '50px'
+      }
+      this.modelStyle.fullScreen = mode
+    },
+    toHandle() {
+      if (this.record.openType === 'url') {
+        this.visible = false
+        //链接跳转
+        this.$router.push({ path: this.record.openPage })
+      }
+    },
+  },
+}
 </script>
 
 <style lang="less">
-  .announcementCustomModal{
-    .ant-modal-header {
-      border: none;
-      display: inline-block;
-      position: absolute;
-      z-index: 1;
-      right: 56px;
-      padding: 0;
-      .ant-modal-title{
-        .custom-btn{
-          width: 56px;
-          height: 56px;
-          border: none;
-          box-shadow: none;
-        }
+.announcementCustomModal {
+  .ant-modal-header {
+    border: none;
+    display: inline-block;
+    position: absolute;
+    z-index: 1;
+    right: 56px;
+    padding: 0;
+    .ant-modal-title {
+      .custom-btn {
+        width: 56px;
+        height: 56px;
+        border: none;
+        box-shadow: none;
       }
     }
-    .daily-article{
-      border-bottom: 0;
-    }
   }
+  .daily-article {
+    border-bottom: 0;
+  }
+}
+.ant-card-meta-description {
+  color: #fff !important;
+}
 </style>
 <style scoped lang="less">
-  .daily-article {
-    .article-button {
-      font-size: 1.2rem !important;
-    }
-    .ant-card-body {
-      padding: 18px !important;
-    }
-    .ant-card-head {
-      padding: 0 1rem;
-    }
-    .ant-card-meta {
-      margin-bottom: 1rem;
-    }
-    .article-content {
-      p {
-        word-wrap: break-word;
-        word-break: break-all;
-        text-overflow: initial;
-        white-space: normal;
-        font-size: .9rem !important;
-        margin-bottom: .8rem;
-      }
+.daily-article {
+  .article-button {
+    font-size: 1.2rem !important;
+  }
+  .ant-card-body {
+    padding: 18px !important;
+  }
+  .ant-card-head {
+    padding: 0 1rem;
+  }
+  .ant-card-meta {
+    margin-bottom: 1rem;
+  }
+  .article-content {
+    p {
+      word-wrap: break-word;
+      word-break: break-all;
+      text-overflow: initial;
+      white-space: normal;
+      font-size: 0.9rem !important;
+      margin-bottom: 0.8rem;
     }
   }
+}
 </style>
diff --git a/src/style.less b/src/style.less
index e9aff9a..45f7b8a 100644
--- a/src/style.less
+++ b/src/style.less
@@ -67,7 +67,7 @@ body {
 @table-border-radius-base: 0;
 @table-padding-vertical-sm: 2px;
 @table-padding-vertical: 6px;
-@table-padding-horizontal: 8px;  
+@table-padding-horizontal: 8px;
 @table-row-hover-bg: #0e505f;
 
 .ant-table {
@@ -188,9 +188,8 @@ body {
   }
   &-time-picker-combobox {
     background-color: @modalBg !important;
-    border-color: @formInputBorderColor !important
+    border-color: @formInputBorderColor !important;
   }
-  
 
   &-picker {
     width: 100%;
@@ -202,7 +201,7 @@ body {
       color: #00e9fe !important;
     }
     &-select {
-      background-color: @formInputBgColor !important
+      background-color: @formInputBgColor !important;
     }
   }
 
@@ -275,7 +274,7 @@ body {
     }
   }
 }
-.ant-calendar-range .ant-calendar-in-range-cell::before{
+.ant-calendar-range .ant-calendar-in-range-cell::before {
   background: #1397a3;
 }
 
@@ -341,7 +340,8 @@ body {
 
   &-selected-day &-date,
   &-date:hover {
-    background-color: #072f32 !important;
+    background-color: #0b4f54 !important;
+    // background-color: #072f32 !important;
   }
 }
 
@@ -382,10 +382,10 @@ body {
 }
 
 // 输入框样式
-.ant-calendar-input{
+.ant-calendar-input {
   background-color: transparent !important;
 }
-.ant-calendar-range-middle{
+.ant-calendar-range-middle {
   color: #fff;
 }
 .ant-input {
@@ -639,7 +639,7 @@ input[type='number']::-webkit-outer-spin-button {
     }
   }
 }
-.ant-select-selection--multiple .ant-select-selection__choice{
+.ant-select-selection--multiple .ant-select-selection__choice {
   max-width: 60%;
 }
 
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
index 5b75ac1..43dbf83 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/cpu.vue
@@ -813,7 +813,6 @@ export default {
   &-item {
     width: 100%;
     height: 100%;
-    // background: #ade6ee;
     &-chart {
       width: 100%;
       height: calc(100% - 40px);
@@ -831,7 +830,7 @@ export default {
         font-size: 14px;
         font-weight: normal;
         color: #ffffff;
-        margin-left: 10px;
+        // margin-left: 5px;
         span {
           color: #00e9fe;
           background: none;
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/createRules.vue b/src/views/abnormalAlarm/serverMonitor/instances/createRules.vue
index 9feda96..af1d92a 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/createRules.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/createRules.vue
@@ -1,48 +1,38 @@
 <template>
   <div>
-    <a-modal 
-      title='Add Rule'
-      :width="845" 
-      v-model="visible" 
-      @cancel="onCancel"
-    >
-      <a-form-model
-        ref="al_ruleForm"
-        :model="form"
-        :rules="rules"
-        layout="vertical"
-      >
-        <a-row :gutter="[15,0]">
+    <a-modal title="Add Rule" :width="845" v-model="visible" @cancel="onCancel">
+      <a-form-model ref="al_ruleForm" :model="form" :rules="rules" layout="vertical">
+        <a-row :gutter="[15, 0]">
           <a-col :span="12">
             <a-form-model-item ref="sourceType" label="Source Type" prop="sourceType">
-              <a-select 
-                v-model="form.sourceType" 
-                :options="typeOptions" 
-                show-arrow 
+              <a-select
+                v-model="form.sourceType"
+                :options="typeOptions"
+                show-arrow
                 allowClear
                 disabled
-                placeholder="select..." 
-                >
+                placeholder="select..."
+              >
                 <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
               </a-select>
             </a-form-model-item>
           </a-col>
           <a-col :span="12">
             <a-form-model-item ref="sourceId" label="Source" prop="sourceId">
-              <a-select 
-                v-model="form.sourceId" 
-                :options="serverList" 
-                show-arrow 
+              <a-select
+                v-model="form.sourceId"
+                :options="serverList"
+                show-arrow
                 allowClear
                 disabled
-                placeholder="select..." 
-                >
+                placeholder="select..."
+              >
                 <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
               </a-select>
             </a-form-model-item>
           </a-col>
         </a-row>
-        <a-row :gutter="[15,0]">
+        <a-row :gutter="[15, 0]">
           <a-col :span="12">
             <a-form-model-item ref="alarmRule" label="Alarm Rule" prop="name">
               <a-input v-model="form.name" placeholder="Pleace enter the alarm rule name" />
@@ -50,30 +40,30 @@
           </a-col>
           <a-col :span="12">
             <a-form-model-item ref="monitorItem" label="Monitor Item" prop="itemId">
-              <a-select 
-                v-model="form.itemId" 
-                :options="itemOptions" 
-                show-arrow 
+              <a-select
+                v-model="form.itemId"
+                :options="itemOptions"
+                show-arrow
                 allowClear
                 labelInValue
-                placeholder="select..." 
+                placeholder="select..."
                 @change="onItemChange"
-                >
+              >
                 <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
               </a-select>
             </a-form-model-item>
           </a-col>
         </a-row>
-        <a-row :gutter="[15,0]">
+        <a-row :gutter="[15, 0]">
           <a-col :span="12">
             <a-form-model-item ref="monitorItem" label="Logic Symbol" prop="operator">
-              <a-select 
-                v-model="form.operator" 
-                :options="operatorOptions" 
-                show-arrow 
+              <a-select
+                v-model="form.operator"
+                :options="operatorOptions"
+                show-arrow
                 allowClear
-                placeholder="select..." 
-                >
+                placeholder="select..."
+              >
                 <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
               </a-select>
             </a-form-model-item>
@@ -84,29 +74,29 @@
             </a-form-model-item>
           </a-col>
         </a-row>
-        <a-row :gutter="[15,0]">
+        <a-row :gutter="[15, 0]">
           <a-col :span="12">
             <a-form-model-item ref="silenceCycle" label="Silence Cycle" prop="silenceCycle">
-              <a-select 
-                v-model="form.silenceCycle" 
-                :options="silenceCyclerOptions" 
-                show-arrow 
+              <a-select
+                v-model="form.silenceCycle"
+                :options="silenceCyclerOptions"
+                show-arrow
                 allowClear
-                placeholder="select..." 
-                >
+                placeholder="select..."
+              >
                 <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
               </a-select>
             </a-form-model-item>
           </a-col>
           <a-col :span="12">
             <a-form-model-item ref="contactGroup" label="Contact Group" prop="contactId">
-              <a-select 
-                v-model="form.contactId" 
-                :options="contactGroupOptions" 
-                show-arrow 
+              <a-select
+                v-model="form.contactId"
+                :options="contactGroupOptions"
+                show-arrow
                 allowClear
-                placeholder="select..." 
-                >
+                placeholder="select..."
+              >
                 <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
               </a-select>
             </a-form-model-item>
@@ -116,7 +106,7 @@
       <template slot="footer">
         <a-space class="operators" :size="20">
           <a-button type="success" @click="onSave">Save</a-button>
-          <a-button type="warn"  @click="onCancel">Cancel</a-button>
+          <a-button type="warn" @click="onCancel">Cancel</a-button>
         </a-space>
       </template>
     </a-modal>
@@ -124,125 +114,109 @@
 </template>
 
 <script>
-import { getAction, postAction, httpAction, deleteAction } from '@/api/manage'
+import { getAction } from '@/api/manage'
 export default {
-  props: ["visible","serverList","currServer","serverLabel"],
+  props: ['visible', 'serverList', 'currServer', 'serverLabel'],
   data() {
     return {
       form: {
-        sourceType: "Server",
+        sourceType: 'Server',
         sourceId: undefined,
-        name: "",
+        name: '',
         itemId: undefined,
         operator: undefined,
-        threshold: "",
+        threshold: '',
         silenceCycle: undefined,
         contactId: undefined,
       },
-      units: "",
+      units: '',
       itemOptions: [],
       typeOptions: [
         {
-          label: "Server",
-          value: "Server"
+          label: 'Server',
+          value: 'Server',
         },
         {
-          label: "Database",
-          value: "Database"
+          label: 'Database',
+          value: 'Database',
         },
         {
-          label: "E-MAIL",
-          value: "Email"
+          label: 'E-MAIL',
+          value: 'Email',
         },
       ],
       sourceOptions: [],
       operatorOptions: [
         {
-          label: ">",
-          value: ">"
+          label: '>',
+          value: '>',
         },
         {
-          label: "<",
-          value: "<"
+          label: '<',
+          value: '<',
         },
         {
-          label: ">=",
-          value: ">="
+          label: '>=',
+          value: '>=',
         },
         {
-          label: "<=",
-          value: "<="
+          label: '<=',
+          value: '<=',
         },
         {
-          label: "==",
-          value: "=="
+          label: '==',
+          value: '==',
         },
       ],
       silenceCyclerOptions: [
         {
-          label: "5 minutes",
-          value: 300
+          label: '5 minutes',
+          value: 300,
         },
         {
-          label: "15 minutes",
-          value: 900
+          label: '15 minutes',
+          value: 900,
         },
         {
-          label: "30 minutes",
-          value: 1800
+          label: '30 minutes',
+          value: 1800,
         },
         {
-          label: "60 minutes",
-          value: 3600
+          label: '60 minutes',
+          value: 3600,
         },
         {
-          label: "3 hours",
-          value: 10800
+          label: '3 hours',
+          value: 10800,
         },
         {
-          label: "6 hours",
-          value: 21600
+          label: '6 hours',
+          value: 21600,
         },
         {
-          label: "12 hours",
-          value: 43200
+          label: '12 hours',
+          value: 43200,
         },
         {
-          label: "24 hours",
-          value: 86400
-        }
+          label: '24 hours',
+          value: 86400,
+        },
       ],
       contactGroupOptions: [],
       rules: {
-        sourceType: [
-          { required: true, message: 'Please select a sourceType', trigger: 'change'},
-        ],
-        sourceId: [
-          { required: true, message: 'Please select a source', trigger: 'change'},
-        ],
-        name: [
-          { required: true, message: 'Please input alarmRule name'},
-        ],
-        itemId: [
-          { required: true, message: 'Please select a monitorItem', trigger: 'change'},
-        ],
-        operator: [
-          { required: true, message: 'Please select a logicSymbol', trigger: 'change'},
-        ],
-        threshold: [
-          { required: true, message: 'Please input threshold'},
-        ],
-        silenceCycle: [
-          { required: true, message: 'Please select a silenceCycle', trigger: 'change'},
-        ],
-        contactId: [
-          { required: true, message: 'Please select a contactGroup', trigger: 'change'},
-        ],
-      }
+        sourceType: [{ required: true, message: 'Please select a sourceType', trigger: 'change' }],
+        sourceId: [{ required: true, message: 'Please select a source', trigger: 'change' }],
+        name: [{ required: true, message: 'Please input alarmRule name' }],
+        itemId: [{ required: true, message: 'Please select a monitorItem', trigger: 'change' }],
+        operator: [{ required: true, message: 'Please select a logicSymbol', trigger: 'change' }],
+        threshold: [{ required: true, message: 'Please input threshold' }],
+        silenceCycle: [{ required: true, message: 'Please select a silenceCycle', trigger: 'change' }],
+        contactId: [{ required: true, message: 'Please select a contactGroup', trigger: 'change' }],
+      },
     }
   },
   mounted() {
-    console.log(this.currServer);
+    console.log(this.currServer)
     this.sourceOptions = this.serverList
   },
   watch: {
@@ -255,7 +229,7 @@ export default {
   },
   methods: {
     onCancel() {
-      this.$emit("onCancel")
+      this.$emit('onCancel')
       this.resetForm()
     },
     onItemChange(val, option) {
@@ -264,22 +238,22 @@ export default {
     },
     onSave() {
       this.$refs.al_ruleForm.validate((valid) => {
-        if (valid) { 
+        if (valid) {
           let params = {
-            silenceCycle:this.form.silenceCycle,
-            contactId:this.form.contactId,
-            sourceId:this.form.sourceId,
-            sourceType:this.form.sourceType,
-            itemId:this.form.itemId.key,
+            silenceCycle: this.form.silenceCycle,
+            contactId: this.form.contactId,
+            sourceId: this.form.sourceId,
+            sourceType: this.form.sourceType,
+            itemId: this.form.itemId.key,
             rule: {
               name: this.form.itemId.label,
               operator: this.form.operator,
               threshold: this.form.threshold,
               units: this.units,
             },
-            name: this.form.name
+            name: this.form.name,
           }
-          this.$emit("onCanonSavecel", params)
+          this.$emit('onCanonSavecel', params)
           this.resetForm()
         }
       })
@@ -289,42 +263,42 @@ export default {
       this.units = option.data.props.units
     },
     getItems(val) {
-      getAction("/alarmRule/getItems", {sourceName:val}).then(res => {
+      getAction('/alarmRule/getItems', { sourceName: val }).then((res) => {
         if (res.success) {
-          this.itemOptions = res.result.map(item => {
+          this.itemOptions = res.result.map((item) => {
             return {
               label: item.name,
               value: item.itemId,
-              units:item.units
+              units: item.units,
             }
           })
         } else {
-          this.$message.warning("This operation fails. Contact your system administrator")
+          this.$message.warning('This operation fails. Contact your system administrator')
         }
       })
     },
     resetForm() {
-      this.$refs.al_ruleForm.resetFields();
-      this.form= {
+      this.$refs.al_ruleForm.resetFields()
+      this.form = {
         sourceType: undefined,
         sourceId: undefined,
-        name: "",
+        name: '',
         itemId: undefined,
         operator: undefined,
-        threshold: "",
+        threshold: '',
         silenceCycle: undefined,
         contactId: undefined,
       }
-      this.sourceOptions =[]
+      this.sourceOptions = []
       this.itemOptions = []
-      this.units = ""
-    }
+      this.units = ''
+    },
   },
 }
 </script>
 
 <style lang="less" scoped>
-/deep/.ant-modal-title{
+/deep/.ant-modal-title {
   letter-spacing: 1px;
 }
 .operators {
@@ -344,7 +318,7 @@ export default {
     }
   }
 }
-.ant-select-dropdown-content{
+.ant-select-dropdown-content {
   position: relative;
   background: #03353f;
 }
diff --git a/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue b/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
index 43a213a..00d2669 100644
--- a/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
+++ b/src/views/abnormalAlarm/serverMonitor/instances/serviceProcess.vue
@@ -216,14 +216,26 @@ export default {
       processCpu: {
         content: null,
         legend: ['mysqld.exe', 'svchost.exe'],
-        color: ['#2d5cd3', '#60cae8', '#1ab060', '#ffbf44', '#e86954', 'red'],
+        color: [
+          ['rgb(45, 92, 211)', 'rgba(45, 92, 211,0)'],
+          ['rgb(96, 202, 232)', 'rgba(96, 202, 232,0)'],
+          ['rgb(26, 176, 96)', 'rgba(26, 176, 96,0)'],
+          ['rgb(255, 191, 68)', 'rgba(255, 191, 68,0)'],
+          ['rgb(232, 105, 84)', 'rgba(232, 105, 84,0)'],
+        ],
         xData: [],
         data: [],
       },
       processMenbry: {
         content: null,
         legend: ['mysqld.exe', 'svchost.exe'],
-        color: ['#2d5cd3', '#60cae8', '#1ab060', '#ffbf44', '#e86954', 'red'],
+        color: [
+          ['rgb(45, 92, 211)', 'rgba(45, 92, 211,0)'],
+          ['rgb(96, 202, 232)', 'rgba(96, 202, 232,0)'],
+          ['rgb(26, 176, 96)', 'rgba(26, 176, 96,0)'],
+          ['rgb(255, 191, 68)', 'rgba(255, 191, 68,0)'],
+          ['rgb(232, 105, 84)', 'rgba(232, 105, 84,0)'],
+        ],
         xData: [],
         data: [],
       },
@@ -242,7 +254,6 @@ export default {
         showSizeChanger: true,
         total: 0,
       },
-      xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
       rankData: {},
     }
   },
@@ -525,12 +536,12 @@ export default {
           type: 'line',
           name: item.name,
           symbol: 'none',
-          itemStyle: { normal: { color: this.processCpu.color[index] } },
+          itemStyle: { normal: { color: this.processCpu.color[index][0] } },
           areaStyle: {
             normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: this.processCpu.color[index] },
-                { offset: 1, color: 'rgba(255,255,255,0)' },
+                { offset: 0, color: this.processCpu.color[index][0] },
+                { offset: 1, color: this.processCpu.color[index][1] },
               ]),
             },
           },
@@ -599,12 +610,12 @@ export default {
           type: 'line',
           name: item.name,
           symbol: 'none',
-          itemStyle: { normal: { color: this.processCpu.color[index] } },
+          itemStyle: { normal: { color: this.processMenbry.color[index][0] } },
           areaStyle: {
             normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                { offset: 0, color: this.processCpu.color[index] },
-                { offset: 1, color: 'rgba(255,255,255,0)' },
+                { offset: 0, color: this.processMenbry.color[index][0] },
+                { offset: 1, color: this.processMenbry.color[index][1] },
               ]),
             },
           },