diff --git a/src/render/PlanispherePage.vue b/src/render/PlanispherePage.vue
index 57a2bd8..c325bb8 100644
--- a/src/render/PlanispherePage.vue
+++ b/src/render/PlanispherePage.vue
@@ -3,16 +3,16 @@
     <TheHeader />
 
     <div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
-      <div class="">
+      <div>
         <PlanisphereView title="北斗" />
       </div>
-      <div class="">
+      <div>
         <PlanisphereView title="GPS" />
       </div>
-      <div class="">
+      <div>
         <PlanisphereView title="格洛纳斯" />
       </div>
-      <div class="">
+      <div>
         <PlanisphereView title="伽利略" />
       </div>
     </div>
diff --git a/src/render/SNRPage.vue b/src/render/SNRPage.vue
index f950976..75946ba 100644
--- a/src/render/SNRPage.vue
+++ b/src/render/SNRPage.vue
@@ -2,18 +2,18 @@
   <full-screen-container>
     <TheHeader />
 
-    <div class="main-content flex flex-wrap flex-1">
-      <div class="w-1/2 h/1/2">
-				<PlanisphereView />
+    <div class="main-content flex-1 grid grid-cols-2 grid-rows-2">
+      <div>
+				<SNRView title="北斗" />
 			</div>
-			<div class="w-1/2 h/1/2">
-				<PlanisphereView />
+			<div>
+				<SNRView title="GPS" />
 			</div>
-			<div class="w-1/2 h/1/2">
-				<PlanisphereView />
+			<div>
+				<SNRView title="格洛纳斯" />
 			</div>
-			<div class="w-1/2 h/1/2">
-				<PlanisphereView />
+			<div>
+				<SNRView title="伽利略" />
 			</div>
     </div>
   </full-screen-container>
diff --git a/src/render/components/PlanisphereView.vue b/src/render/components/PlanisphereView.vue
index 6b73ca7..4292945 100644
--- a/src/render/components/PlanisphereView.vue
+++ b/src/render/components/PlanisphereView.vue
@@ -23,13 +23,12 @@ use([
 
 const props = defineProps({
   title: String
-}) 
+})
 
 const option = reactive({
   title: {
     text: props.title,
     left: 'center'
-    // textAlign: 'center'
   },
   polar: {
     radius: '75%'
diff --git a/src/render/components/SNRView.vue b/src/render/components/SNRView.vue
index 93295f2..e29d1f4 100644
--- a/src/render/components/SNRView.vue
+++ b/src/render/components/SNRView.vue
@@ -9,17 +9,22 @@ import { reactive } from "vue"
 import { use, graphic } from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import { BarChart } from "echarts/charts";
-import { GridComponent } from "echarts/components";
+import { TitleComponent, GridComponent } from "echarts/components";
 import VChart from "vue-echarts";
-import utils from '../api/utils'
+import { get_in_positioning_id } from '../api/util'
 
 
 use([
   CanvasRenderer,
   BarChart,
+	TitleComponent,
   GridComponent
 ]);
 
+const props = defineProps({
+  title: String
+})
+
 const BAR_COUNT			   		 = 16
 const UN_POSITIONING_COLOR = '#9ca3af'
 const IN_POSITIONING_COLOR = new graphic.LinearGradient(
@@ -31,6 +36,10 @@ const IN_POSITIONING_COLOR = new graphic.LinearGradient(
 )
 
 const option 			 = reactive({
+  title: {
+    text: props.title,
+    left: 'center'
+  },
 	grid: {
 		containLabel: true
 	},