diff --git a/frontend/src/views/chat/component/DisplayChartBlock.vue b/frontend/src/views/chat/component/DisplayChartBlock.vue
new file mode 100644
index 0000000..bd609ed
--- /dev/null
+++ b/frontend/src/views/chat/component/DisplayChartBlock.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import ChartComponent from '@/views/chat/component/ChartComponent.vue'
+import type { ChatMessage } from '@/api/chat.ts'
+import { computed, nextTick, ref } from 'vue'
+import type { ChartTypes } from '@/views/chat/component/BaseChart.ts'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps<{
+  id?: number | string
+  chartType: ChartTypes
+  message: ChatMessage
+  data: Array<{ [key: string]: any }>
+}>()
+
+const { t } = useI18n()
+
+const chartObject = computed<{
+  type: ChartTypes
+  title: string
+  axis: {
+    x: { name: string; value: string }
+    y: { name: string; value: string }
+    series: { name: string; value: string }
+  }
+  columns: Array<{ name: string; value: string }>
+}>(() => {
+  if (props.message?.record?.chart) {
+    return JSON.parse(props.message.record.chart)
+  }
+  return {}
+})
+
+const xAxis = computed(() => {
+  if (chartObject.value?.axis?.x) {
+    return [chartObject.value.axis.x]
+  }
+  return []
+})
+const yAxis = computed(() => {
+  if (chartObject.value?.axis?.y) {
+    return [chartObject.value.axis.y]
+  }
+  return []
+})
+const series = computed(() => {
+  if (chartObject.value?.axis?.series) {
+    return [chartObject.value.axis.series]
+  }
+  return []
+})
+
+const chartRef = ref()
+
+function onTypeChange() {
+  nextTick(() => {
+    chartRef.value?.destroyChart()
+    chartRef.value?.renderChart()
+  })
+}
+function getViewInfo() {
+  return {
+    chart: {
+      columns: chartObject.value?.columns,
+      type: props.chartType,
+      xAxis: xAxis.value,
+      yAxis: yAxis.value,
+      series: series.value,
+      title: chartObject.value.title,
+    },
+    data: { data: props.data },
+  }
+}
+function getExcelData() {
+  return chartRef.value?.getExcelData()
+}
+
+defineExpose({
+  onTypeChange,
+  getViewInfo,
+  getExcelData,
+})
+</script>
+
+<template>
+  <div v-if="message.record?.chart" class="chart-base-container">
+    <ChartComponent
+      v-if="message.record.id && data?.length > 0"
+      :id="id ?? 'default_chat_id'"
+      ref="chartRef"
+      :type="chartType"
+      :columns="chartObject?.columns"
+      :x="xAxis"
+      :y="yAxis"
+      :series="series"
+      :data="data"
+    />
+    <el-empty v-else :description="t('chat.no_data')" />
+  </div>
+</template>
+
+<style scoped lang="less">
+.chart-base-container {
+  height: 100%;
+  width: 100%;
+  border-radius: 12px;
+  background: rgba(224, 224, 226, 0.29);
+}
+</style>