diff --git a/src/store/modules/topology/index.ts b/src/store/modules/topology/index.ts
index 2c9e25d..28de796 100644
--- a/src/store/modules/topology/index.ts
+++ b/src/store/modules/topology/index.ts
@@ -179,11 +179,12 @@
     data.getSLATrend.values.map((i: any) => i.value) : [];
     state.instanceDependencyMetrics.getThroughputTrend = data.getThroughputTrend ?
     data.getThroughputTrend.values.map((i: any) => i.value) : [];
-    state.instanceDependencyMetrics.p50 = data.p50 ? data.p50.values.map((i: any) => i.value) : [];
-    state.instanceDependencyMetrics.p75 = data.p75 ? data.p75.values.map((i: any) => i.value) : [];
-    state.instanceDependencyMetrics.p90 = data.p90 ? data.p90.values.map((i: any) => i.value) : [];
-    state.instanceDependencyMetrics.p95 = data.p95 ? data.p95.values.map((i: any) => i.value) : [];
-    state.instanceDependencyMetrics.p99 = data.p99 ? data.p99.values.map((i: any) => i.value) : [];
+    state.instanceDependencyMetrics.percentResponse = {};
+    state.instanceDependencyMetrics.percentResponse.p50 = data.p50 ? data.p50.values.map((i: any) => i.value) : [];
+    state.instanceDependencyMetrics.percentResponse.p75 = data.p75 ? data.p75.values.map((i: any) => i.value) : [];
+    state.instanceDependencyMetrics.percentResponse.p90 = data.p90 ? data.p90.values.map((i: any) => i.value) : [];
+    state.instanceDependencyMetrics.percentResponse.p95 = data.p95 ? data.p95.values.map((i: any) => i.value) : [];
+    state.instanceDependencyMetrics.percentResponse.p99 = data.p99 ? data.p99.values.map((i: any) => i.value) : [];
   },
   [types.SET_INSTANCE_DEPEDENCE_TYPE](state: State, data: string) {
     state.queryInstanceMetricsType = data;
diff --git a/src/views/components/topology/chart-line.vue b/src/views/components/topology/chart-line.vue
new file mode 100644
index 0000000..4e6abdd
--- /dev/null
+++ b/src/views/components/topology/chart-line.vue
@@ -0,0 +1,108 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+<template>
+  <div>
+    <div class="grey sm mb-5">{{title}}</div>
+    <RkEcharts height="120px" :option="option"/>
+  </div>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component
+export default class ChartLine extends Vue {
+  @Prop() private data!: any;
+  @Prop() private title!: string;
+  @Prop() private intervalTime!: any;
+  public resize() {
+    const chart: any = this.$refs.chart;
+    chart.myChart.resize();
+  }
+  get option() {
+    const temp: any = [];
+    const keys = Object.keys(this.data || {}).filter((i: any) => Array.isArray(this.data[i]) && this.data[i].length);
+    keys.forEach((i: any, index: number) => {
+      const serie: any = {
+          data: this.data[i].map((item: any, itemIndex: number) => [
+            this.intervalTime[itemIndex],
+            item,
+          ]),
+          name: i,
+          type: 'line',
+          symbol: 'none',
+          barMaxWidth: 10,
+          lineStyle: {
+            width: 1.5,
+            type: 'solid',
+          },
+      };
+      temp.push(serie);
+    });
+    const color: string[] = [
+      '#30A4EB',
+      '#45BFC0',
+      '#FFCC55',
+      '#FF6A84',
+      '#a0a7e6',
+      '#6be6c1',
+      '#626c91',
+      '#96dee8',
+      '#3f96e3',
+    ];
+
+    return {
+      color,
+      tooltip: {
+        trigger: 'axis',
+        backgroundColor: 'rgb(50,50,50)',
+        textStyle: {
+          fontSize: 13,
+        },
+      },
+      legend: {
+        show: false,
+      },
+      grid: {
+        top: 5,
+        left: 0,
+        right: 18,
+        bottom: 5,
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'category',
+        axisTick: {
+          lineStyle: { color: '#c1c5ca41' },
+          alignWithLabel: true,
+        },
+        splitLine: { show: false },
+        axisLine: { lineStyle: { color: 'rgba(0,0,0,0)' } },
+        axisLabel: { color: '#9da5b2', fontSize: '11' },
+      },
+      yAxis: {
+        type: 'value',
+        axisLine: { show: false },
+        axisTick: { show: false },
+        splitLine: { lineStyle: { color: '#c1c5ca41', type: 'dashed' } },
+        axisLabel: { color: '#9da5b2', fontSize: '11' },
+      },
+      series: temp,
+    };
+  }
+}
+</script>
diff --git a/src/views/components/topology/topo-instance-dependency.vue b/src/views/components/topology/topo-instance-dependency.vue
index d61e0aa..c32d8f5 100644
--- a/src/views/components/topology/topo-instance-dependency.vue
+++ b/src/views/components/topology/topo-instance-dependency.vue
@@ -26,46 +26,46 @@
         <div class="mb-5 clear">
           <span class="b dib mr-20 vm">{{ $t('detectPoint') }}</span>
           <span
-              v-if="stateTopo.selectedInstanceCall.detectPoints.includes('CLIENT')"
-              class="link-topo-aside-box-btn tc r sm cp b"
-              :class="{'active':stateTopo.queryInstanceMetricsType==='CLIENT'}"
-              @click="setMode('CLIENT')"
+            v-if="stateTopo.selectedInstanceCall.detectPoints.includes('CLIENT')"
+            class="link-topo-aside-box-btn tc r sm cp b"
+            :class="{'active':stateTopo.queryInstanceMetricsType==='CLIENT'}"
+            @click="setMode('CLIENT')"
           >{{ this.$t('client') }}</span>
           <span
-              v-if="stateTopo.selectedInstanceCall.detectPoints.includes('SERVER')"
-              class="link-topo-aside-box-btn tc r sm cp b"
-              :class="{'active':stateTopo.queryInstanceMetricsType==='SERVER' }"
-              @click="setMode('SERVER')"
+            v-if="stateTopo.selectedInstanceCall.detectPoints.includes('SERVER')"
+            class="link-topo-aside-box-btn tc r sm cp b"
+            :class="{'active':stateTopo.queryInstanceMetricsType==='SERVER' }"
+            @click="setMode('SERVER')"
           >{{ this.$t('server') }}</span>
         </div>
         <div v-if="stateTopo.selectedInstanceCall">
           <TopoChart
-              v-if="stateTopo.instanceDependencyMetrics.getResponseTimeTrend"
-              :data="stateTopo.instanceDependencyMetrics.getResponseTimeTrend"
-              :intervalTime="intervalTime"
-              :title="$t('avgResponseTime')"
-              unit="ms"
+            v-if="stateTopo.instanceDependencyMetrics.getResponseTimeTrend"
+            :data="stateTopo.instanceDependencyMetrics.getResponseTimeTrend"
+            :intervalTime="intervalTime"
+            :title="$t('avgResponseTime')"
+            unit="ms"
           />
           <TopoChart
-              v-if="stateTopo.instanceDependencyMetrics.getThroughputTrend"
-              :data="stateTopo.instanceDependencyMetrics.getThroughputTrend"
-              :intervalTime="intervalTime"
-              :title="$t('avgThroughput')"
-              unit="cpm"
+            v-if="stateTopo.instanceDependencyMetrics.getThroughputTrend"
+            :data="stateTopo.instanceDependencyMetrics.getThroughputTrend"
+            :intervalTime="intervalTime"
+            :title="$t('avgThroughput')"
+            unit="cpm"
           />
           <TopoChart
-              v-if="stateTopo.instanceDependencyMetrics.getSLATrend"
-              :data="stateTopo.instanceDependencyMetrics.getSLATrend"
-              :intervalTime="intervalTime"
-              :precent="true"
-              :title="$t('avgSLA')"
-              unit="%"
+            v-if="stateTopo.instanceDependencyMetrics.getSLATrend"
+            :data="stateTopo.instanceDependencyMetrics.getSLATrend"
+            :intervalTime="intervalTime"
+            :precent="true"
+            :title="$t('avgSLA')"
+            unit="%"
           />
-          <ChartResponse
-              v-if="stateTopo.instanceDependencyMetrics.p50"
-              :data="stateTopo.instanceDependencyMetrics"
-              :intervalTime="intervalTime"
-              :title="$t('percentResponse')"
+          <ChartLine
+            v-if="stateTopo.instanceDependencyMetrics.percentResponse"
+            :data="stateTopo.instanceDependencyMetrics.percentResponse"
+            :intervalTime="intervalTime"
+            :title="$t('percentResponse')"
           />
         </div>
       </div>
@@ -79,12 +79,12 @@
 import { State as topoState} from '@/store/modules/topology';
 import Topo from './topo.vue';
 import TopoChart from './topo-chart.vue';
-import ChartResponse from './topo-response.vue';
 import DependencySankey from './dependency-sankey.vue';
+import ChartLine from './chart-line.vue';
 
 @Component({
   components: {
-    Topo, ChartResponse, TopoChart, DependencySankey,
+    Topo, ChartLine, TopoChart, DependencySankey,
   },
 })
 export default class TopoInstanceDependency extends Vue {