diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index 6e60c63c..ad7c7344 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -16,10 +16,12 @@ limitations under the License. -->
   <div class="widget-config flex-v">
     <div class="graph" v-loading="loading">
       <div class="header">
-        <span>{{ widget.title || "" }}</span>
+        <span>{{ decodeURIComponent(title) }}</span>
         <div class="tips" v-show="widget.tips">
-          <el-tooltip :content="widget.tips || ''">
-            <Icon iconName="info_outline" size="sm" />
+          <el-tooltip :content="decodeURIComponent(tips) || ''">
+            <span>
+              <Icon iconName="info_outline" size="sm" />
+            </span>
           </el-tooltip>
         </div>
       </div>
@@ -113,6 +115,8 @@ export default defineComponent({
     const originConfig = dashboardStore.selectedGrid;
     const widget = computed(() => dashboardStore.selectedGrid.widget || {});
     const graph = computed(() => dashboardStore.selectedGrid.graph || {});
+    const title = computed(() => encodeURIComponent(widget.value.title || ""));
+    const tips = computed(() => encodeURIComponent(widget.value.tips || ""));
 
     function getSource(source: unknown) {
       states.source = source;
@@ -152,6 +156,8 @@ export default defineComponent({
       isEdit,
       widget,
       graph,
+      title,
+      tips,
     };
   },
 });
diff --git a/src/views/dashboard/configuration/widget/WidgetOptions.vue b/src/views/dashboard/configuration/widget/WidgetOptions.vue
index b9d707ed..5372a649 100644
--- a/src/views/dashboard/configuration/widget/WidgetOptions.vue
+++ b/src/views/dashboard/configuration/widget/WidgetOptions.vue
@@ -20,7 +20,7 @@ limitations under the License. -->
       v-model="title"
       size="small"
       placeholder="Please input title"
-      @change="updateWidgetConfig({ title })"
+      @change="updateWidgetConfig({ title: encodeURIComponent(title) })"
     />
   </div>
   <div class="item">
@@ -30,7 +30,7 @@ limitations under the License. -->
       v-model="tips"
       size="small"
       placeholder="Please input tips"
-      @change="updateWidgetConfig({ tips })"
+      @change="updateWidgetConfig({ tips: encodeURIComponent(tips) })"
     />
   </div>
 </template>
@@ -46,10 +46,14 @@ const widget = dashboardStore.selectedGrid.widget || {};
 const title = ref<string>(widget.title || "");
 const tips = ref<string>(widget.tips || "");
 
-function updateWidgetConfig(param: { [key: string]: unknown }) {
+function updateWidgetConfig(param: { [key: string]: string }) {
+  const key = Object.keys(param)[0];
+  if (!key) {
+    return;
+  }
   const widget = {
     ...dashboardStore.selectedGrid.widget,
-    ...param,
+    [key]: decodeURIComponent(param[key]),
   };
   dashboardStore.selectWidget({ ...selectedGrid, widget });
 }
diff --git a/src/views/dashboard/configuration/widget/metric/Standard.vue b/src/views/dashboard/configuration/widget/metric/Standard.vue
index 046a938f..47a3fbf6 100644
--- a/src/views/dashboard/configuration/widget/metric/Standard.vue
+++ b/src/views/dashboard/configuration/widget/metric/Standard.vue
@@ -21,7 +21,9 @@ limitations under the License. -->
         v-model="currentMetric.unit"
         size="small"
         placeholder="Please input unit"
-        @change="changeConfigs(index, { unit: currentMetric.unit })"
+        @change="
+          updateConfig(index, { unit: encodeURIComponent(currentMetric.unit) })
+        "
       />
     </div>
     <div class="item mb-10" v-show="metricType === 'readLabeledMetricsValues'">
@@ -31,7 +33,11 @@ limitations under the License. -->
         v-model="currentMetric.label"
         size="small"
         placeholder="Please input a name"
-        @change="changeConfigs(index, { label: currentMetric.label })"
+        @change="
+          updateConfig(index, {
+            label: encodeURIComponent(currentMetric.label),
+          })
+        "
       />
     </div>
     <div class="item mb-10" v-show="metricType === 'readLabeledMetricsValues'">
@@ -42,7 +48,9 @@ limitations under the License. -->
         size="small"
         placeholder="auto"
         @change="
-          changeConfigs(index, { labelsIndex: currentMetric.labelsIndex })
+          updateConfig(index, {
+            labelsIndex: encodeURIComponent(currentMetric.labelsIndex),
+          })
         "
       />
     </div>
@@ -108,13 +116,21 @@ const metricType = ref<string>(metricTypes[props.index]);
 const isTopn = computed(() =>
   ["sortMetrics", "readSampledRecords"].includes(metricTypes[props.index])
 );
+function updateConfig(index: number, param: { [key: string]: string }) {
+  const key = Object.keys(param)[0];
+  if (!key) {
+    return;
+  }
+  changeConfigs(index, { key: decodeURIComponent(param[key]) });
+}
 function changeConfigs(
   index: number,
   param: { [key: string]: string | number }
 ) {
   const metricConfig = dashboardStore.selectedGrid.metricConfig || [];
-  metricConfig[index] = { ...metricConfig[index], ...param };
 
+  metricConfig[index] = { ...metricConfig[index], ...param };
+  currentMetric.value = metricConfig[index];
   dashboardStore.selectWidget({
     ...dashboardStore.selectedGrid,
     metricConfig,
diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index 2c33eaf0..241dacc1 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -22,13 +22,14 @@ limitations under the License. -->
   >
     {{ singleVal.toFixed(2) }}
     <span v-show="config.showUnit">
-      {{ metricConfig[0]?.unit }}
+      {{ decodeURIComponent(unit) }}
     </span>
   </div>
-  <div class="center no-data" v-else>No Data</div>
+  <div class="center no-data" v-else>{{ t("noData") }}</div>
 </template>
 <script lang="ts" setup>
 import { computed, PropType } from "vue";
+import { useI18n } from "vue-i18n";
 import { CardConfig, MetricConfigOpt } from "@/types/dashboard";
 
 /*global defineProps */
@@ -47,9 +48,13 @@ const props = defineProps({
     }),
   },
 });
+const { t } = useI18n();
 const metricConfig = computed(() => props.config.metricConfig || []);
 const key = computed(() => Object.keys(props.data)[0]);
 const singleVal = computed(() => Number(props.data[key.value]));
+const unit = computed(
+  () => metricConfig.value[0] && encodeURIComponent(metricConfig.value[0].unit)
+);
 </script>
 <style lang="scss" scoped>
 .chart-card {