diff --git a/shadingsphere-benchmark-ui/src/router/index.js b/shadingsphere-benchmark-ui/src/router/index.js
index f0dce310..d810cb5e 100644
--- a/shadingsphere-benchmark-ui/src/router/index.js
+++ b/shadingsphere-benchmark-ui/src/router/index.js
@@ -33,6 +33,18 @@ export const constantRouterMap = [
     component: () =>
       import('@/views/sharding-proxy-single-database-single-table/index'),
     hidden: true
+  },
+  {
+    path: '/shardingjdbc-vs-shardingproxy-encrypt',
+    component: () =>
+      import('@/views/shardingjdbc-vs-shardingproxy-encrypt/index'),
+    hidden: true
+  },
+  {
+    path: '/shardingjdbc-vs-shardingproxy-sharding-encrypt',
+    component: () =>
+      import('@/views/shardingjdbc-vs-shardingproxy-sharding-encrypt/index'),
+    hidden: true
   }
 ]
 
diff --git a/shadingsphere-benchmark-ui/src/utils/api.js b/shadingsphere-benchmark-ui/src/utils/api.js
index a9bf7b6e..865365f7 100644
--- a/shadingsphere-benchmark-ui/src/utils/api.js
+++ b/shadingsphere-benchmark-ui/src/utils/api.js
@@ -1,7 +1,7 @@
 import $ from 'jquery'
 
 const HOST =
-  'https://raw.githubusercontent.com/wqzwh/incubator-shardingsphere-benchmark/master/report'
+  'https://raw.githubusercontent.com/apache/incubator-shardingsphere-benchmark/master/report/'
 
 function ajax(url, type) {
   return new Promise((resolve, reject) => {
diff --git a/shadingsphere-benchmark-ui/src/utils/mixin.js b/shadingsphere-benchmark-ui/src/utils/mixin.js
index 3dd295ab..3cce6d92 100644
--- a/shadingsphere-benchmark-ui/src/utils/mixin.js
+++ b/shadingsphere-benchmark-ui/src/utils/mixin.js
@@ -33,7 +33,7 @@ const mountedMixin = {
             legend[m].push(mm.type)
             const data = []
             for (const mmm of Object.keys(mm.data)) {
-              if (xAxis[m].length !== mm.data.length) {
+              if (xAxis[m].length < mm.data.length) {
                 xAxis[m].push(mmm)
               }
               data.push({
diff --git a/shadingsphere-benchmark-ui/src/utils/utils.js b/shadingsphere-benchmark-ui/src/utils/utils.js
index a0b606b9..9e859d82 100644
--- a/shadingsphere-benchmark-ui/src/utils/utils.js
+++ b/shadingsphere-benchmark-ui/src/utils/utils.js
@@ -8,5 +8,9 @@ export default {
   getShardingProxyMasterSlaveData: () =>
     API.get(`/data_json/sharding_proxy_master_slave.json`),
   getShardingProxySingleDatabaseSingleTableData: () =>
-    API.get(`/data_json/sharding_proxy_single_database_single_table.json`)
+    API.get(`/data_json/sharding_proxy_single_database_single_table.json`),
+  getShardingjdbcVsShardingproxyEncrypt: () =>
+    API.get(`/data_json/shardingjdbc_vs_shardingproxy_encrypt.json`),
+  getShardingjdbcVsShardingproxyShardingEncrypt: () =>
+    API.get(`/data_json/shardingjdbc_vs_shardingproxy_sharding_encrypt.json`)
 }
diff --git a/shadingsphere-benchmark-ui/src/views/mysql-vs-sharding/index.vue b/shadingsphere-benchmark-ui/src/views/mysql-vs-sharding/index.vue
index b0bd2a57..8542708c 100644
--- a/shadingsphere-benchmark-ui/src/views/mysql-vs-sharding/index.vue
+++ b/shadingsphere-benchmark-ui/src/views/mysql-vs-sharding/index.vue
@@ -43,7 +43,7 @@ import { mountedMixin } from '../../utils/mixin'
 import { getLineOptions } from '../../utils/line'
 
 export default {
-  name: 'Home',
+  name: 'MysqlVsSharding',
   components: {
     'v-chart': ECharts
   },
diff --git a/shadingsphere-benchmark-ui/src/views/overview/index.vue b/shadingsphere-benchmark-ui/src/views/overview/index.vue
index 7c060f24..77da3b22 100644
--- a/shadingsphere-benchmark-ui/src/views/overview/index.vue
+++ b/shadingsphere-benchmark-ui/src/views/overview/index.vue
@@ -36,6 +36,22 @@
           </router-link>
         </Card>
       </Col>
+      <Col span="6">
+        <Card class="card-item">
+          <router-link to="shardingjdbc-vs-shardingproxy-encrypt">
+            <h3>shardingjdbc vs shardingproxy encrypt</h3>
+            <span class="card-span">detail</span>
+          </router-link>
+        </Card>
+      </Col>
+      <Col span="6">
+        <Card class="card-item">
+          <router-link to="shardingjdbc-vs-shardingproxy-sharding-encrypt">
+            <h3>shardingjdbc vs shardingproxy sharding encrypt</h3>
+            <span class="card-span">detail</span>
+          </router-link>
+        </Card>
+      </Col>
     </Row>
   </Card>
 </template>
@@ -52,6 +68,7 @@ export default {
 .card-item {
   min-height: 150px;
   position: relative;
+  margin-bottom: 15px;
 }
 h3 {
   color: #333;
diff --git a/shadingsphere-benchmark-ui/src/views/sharding-proxy-master-slave-sharding/index.vue b/shadingsphere-benchmark-ui/src/views/sharding-proxy-master-slave-sharding/index.vue
index 52237f0b..50a95777 100644
--- a/shadingsphere-benchmark-ui/src/views/sharding-proxy-master-slave-sharding/index.vue
+++ b/shadingsphere-benchmark-ui/src/views/sharding-proxy-master-slave-sharding/index.vue
@@ -44,7 +44,7 @@ import { mountedMixin } from '../../utils/mixin'
 import { getLineOptions } from '../../utils/line'
 
 export default {
-  name: 'Home',
+  name: 'ShardingProxyMasterSlaveSharding',
   components: {
     'v-chart': ECharts
   },
diff --git a/shadingsphere-benchmark-ui/src/views/sharding-proxy-master-slave/index.vue b/shadingsphere-benchmark-ui/src/views/sharding-proxy-master-slave/index.vue
index b99ffeb1..f1612ca3 100644
--- a/shadingsphere-benchmark-ui/src/views/sharding-proxy-master-slave/index.vue
+++ b/shadingsphere-benchmark-ui/src/views/sharding-proxy-master-slave/index.vue
@@ -44,7 +44,7 @@ import { mountedMixin } from '../../utils/mixin'
 import { getLineOptions } from '../../utils/line'
 
 export default {
-  name: 'Home',
+  name: 'ShardingProxyMasterSlave',
   components: {
     'v-chart': ECharts
   },
diff --git a/shadingsphere-benchmark-ui/src/views/sharding-proxy-single-database-single-table/index.vue b/shadingsphere-benchmark-ui/src/views/sharding-proxy-single-database-single-table/index.vue
index 3a6f2335..a84118a0 100644
--- a/shadingsphere-benchmark-ui/src/views/sharding-proxy-single-database-single-table/index.vue
+++ b/shadingsphere-benchmark-ui/src/views/sharding-proxy-single-database-single-table/index.vue
@@ -44,7 +44,7 @@ import { mountedMixin } from '../../utils/mixin'
 import { getLineOptions } from '../../utils/line'
 
 export default {
-  name: 'Home',
+  name: 'ShardingProxySingleDatabaseSingleTable',
   components: {
     'v-chart': ECharts
   },
diff --git a/shadingsphere-benchmark-ui/src/views/shardingjdbc-vs-shardingproxy-encrypt/index.vue b/shadingsphere-benchmark-ui/src/views/shardingjdbc-vs-shardingproxy-encrypt/index.vue
new file mode 100644
index 00000000..8aa8286c
--- /dev/null
+++ b/shadingsphere-benchmark-ui/src/views/shardingjdbc-vs-shardingproxy-encrypt/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <Row :gutter="16" style="background:#eee; padding:20px">
+    <Col
+      v-for="(value, name, index) in series"
+      :key="index"
+      :xs="24"
+      :sm="24"
+      :md="24"
+      :lg="24"
+      :xl="24"
+      :xxl="12"
+      class="col-item"
+    >
+      <Card :bordered="false">
+        <p slot="title" style="font-size: 18px">{{ name.toLowerCase() }}</p>
+        <v-chart :options="getOptions(name)" />
+        <Form :label-width="140">
+          <FormItem
+            v-for="(value, name,indx) in desc[name]"
+            :label="`${name}:`"
+            :key="indx"
+          >{{ value }}</FormItem>
+        </Form>
+      </Card>
+    </Col>
+    <div v-show="loading" class="spin-container">
+      <Spin fix>
+        <Icon type="ios-loading" size="18" class="spin-icon-load" />
+        <div>Loading</div>
+      </Spin>
+    </div>
+  </Row>
+</template>
+
+<script>
+import ECharts from 'vue-echarts'
+import 'echarts/lib/chart/line'
+import 'echarts/lib/component/tooltip'
+import 'echarts/lib/component/legend'
+import 'echarts/lib/component/title'
+import apis from '../../utils/utils'
+import { mountedMixin } from '../../utils/mixin'
+import { getLineOptions } from '../../utils/line'
+
+export default {
+  name: 'ShardingjdbcVsShardingproxyEncrypt',
+  components: {
+    'v-chart': ECharts
+  },
+  mixins: [mountedMixin],
+  data() {
+    return {
+      data: []
+    }
+  },
+  mounted() {
+    this.loading = true
+    apis.getShardingjdbcVsShardingproxyEncrypt().then(res => {
+      this.formatData(res)
+      this.loading = false
+    })
+  },
+  methods: {
+    getOptions(name) {
+      return getLineOptions(name, this.xAxis, this.legend, this.series)
+    }
+  }
+}
+</script>
+<style>
+.echarts {
+  width: 100%;
+  height: 400px;
+}
+.col-item {
+  margin-bottom: 16px;
+}
+.ivu-form-item {
+  margin-bottom: 10px !important;
+}
+.ivu-form-item-label {
+  font-size: 15px !important;
+}
+.ivu-form-item-content {
+  font-size: 14px !important;
+}
+</style>
diff --git a/shadingsphere-benchmark-ui/src/views/shardingjdbc-vs-shardingproxy-sharding-encrypt/index.vue b/shadingsphere-benchmark-ui/src/views/shardingjdbc-vs-shardingproxy-sharding-encrypt/index.vue
new file mode 100644
index 00000000..84b236b5
--- /dev/null
+++ b/shadingsphere-benchmark-ui/src/views/shardingjdbc-vs-shardingproxy-sharding-encrypt/index.vue
@@ -0,0 +1,87 @@
+<template>
+  <Row :gutter="16" style="background:#eee; padding:20px">
+    <Col
+      v-for="(value, name, index) in series"
+      :key="index"
+      :xs="24"
+      :sm="24"
+      :md="24"
+      :lg="24"
+      :xl="24"
+      :xxl="12"
+      class="col-item"
+    >
+      <Card :bordered="false">
+        <p slot="title" style="font-size: 18px">{{ name.toLowerCase() }}</p>
+        <v-chart :options="getOptions(name)" />
+        <Form :label-width="140">
+          <FormItem
+            v-for="(value, name,indx) in desc[name]"
+            :label="`${name}:`"
+            :key="indx"
+          >{{ value }}</FormItem>
+        </Form>
+      </Card>
+    </Col>
+    <div v-show="loading" class="spin-container">
+      <Spin fix>
+        <Icon type="ios-loading" size="18" class="spin-icon-load" />
+        <div>Loading</div>
+      </Spin>
+    </div>
+  </Row>
+</template>
+
+<script>
+import ECharts from 'vue-echarts'
+import 'echarts/lib/chart/line'
+import 'echarts/lib/component/tooltip'
+import 'echarts/lib/component/legend'
+import 'echarts/lib/component/title'
+import apis from '../../utils/utils'
+import { mountedMixin } from '../../utils/mixin'
+import { getLineOptions } from '../../utils/line'
+
+export default {
+  name: 'ShardingjdbcVsShardingproxyShardingEncrypt',
+  components: {
+    'v-chart': ECharts
+  },
+  mixins: [mountedMixin],
+  data() {
+    return {
+      data: []
+    }
+  },
+  mounted() {
+    this.loading = true
+    apis.getShardingjdbcVsShardingproxyShardingEncrypt().then(res => {
+      this.formatData(res)
+      this.loading = false
+    })
+  },
+  methods: {
+    getOptions(name) {
+      return getLineOptions(name, this.xAxis, this.legend, this.series)
+    }
+  }
+}
+</script>
+<style>
+.echarts {
+  width: 100%;
+  height: 400px;
+}
+.col-item {
+  margin-bottom: 16px;
+}
+.ivu-form-item {
+  margin-bottom: 10px !important;
+}
+.ivu-form-item-label {
+  font-size: 15px !important;
+}
+.ivu-form-item-content {
+  font-size: 14px !important;
+}
+</style>