diff --git a/frontend/src/views/chart/chart/bar/baseBar.js b/frontend/src/views/chart/chart/bar/baseBar.js
new file mode 100644
index 0000000000..69788002e1
--- /dev/null
+++ b/frontend/src/views/chart/chart/bar/baseBar.js
@@ -0,0 +1,21 @@
+export function baseBarOption(chart_option, chart) {
+// 处理data
+  if (chart.data) {
+    chart_option.title.text = chart.title
+    chart_option.xAxis.data = chart.data.x
+    chart.data.series.forEach(function(y) {
+      chart_option.legend.data.push(y.name)
+      chart_option.series.push(y)
+    })
+  }
+  // console.log(chart_option);
+  // 处理shape attr
+  if (chart.customAttr) {
+    const customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.color) {
+      chart_option.color = customAttr.color.colors
+    }
+  }
+  return chart_option
+}
+
diff --git a/frontend/src/views/chart/chart/line/baseLine.js b/frontend/src/views/chart/chart/line/baseLine.js
new file mode 100644
index 0000000000..d431f2758d
--- /dev/null
+++ b/frontend/src/views/chart/chart/line/baseLine.js
@@ -0,0 +1,21 @@
+export function baseLineOption(chart_option, chart) {
+// 处理data
+  if (chart.data) {
+    chart_option.title.text = chart.title
+    chart_option.xAxis.data = chart.data.x
+    chart.data.series.forEach(function(y) {
+      chart_option.legend.data.push(y.name)
+      chart_option.series.push(y)
+    })
+  }
+  // console.log(chart_option);
+  // 处理shape attr
+  if (chart.customAttr) {
+    const customAttr = JSON.parse(chart.customAttr)
+    if (customAttr.color) {
+      chart_option.color = customAttr.color.colors
+    }
+  }
+  return chart_option
+}
+
diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue
index 2e065d2594..4aac1f97ab 100644
--- a/frontend/src/views/chart/components/ChartComponent.vue
+++ b/frontend/src/views/chart/components/ChartComponent.vue
@@ -6,6 +6,8 @@
 
 <script>
 import { BASE_BAR, BASE_LINE } from '../chart/chart'
+import { baseBarOption } from '../chart/bar/baseBar'
+import { baseLineOption } from '../chart/line/baseLine'
 
 export default {
   name: 'ChartComponent',
@@ -35,28 +37,11 @@ export default {
       let chart_option = {}
       // todo type
       if (chart.type === 'bar') {
-        chart_option = JSON.parse(JSON.stringify(BASE_BAR))
+        chart_option = baseBarOption(JSON.parse(JSON.stringify(BASE_BAR)), chart)
       } else if (chart.type === 'line') {
-        chart_option = JSON.parse(JSON.stringify(BASE_LINE))
+        chart_option = baseLineOption(JSON.parse(JSON.stringify(BASE_LINE)), chart)
       }
       // console.log(chart_option);
-      // 处理data
-      if (chart.data) {
-        chart_option.title.text = chart.title
-        chart_option.xAxis.data = chart.data.x
-        chart.data.series.forEach(function(y) {
-          chart_option.legend.data.push(y.name)
-          chart_option.series.push(y)
-        })
-      }
-      // console.log(chart_option);
-      // 处理shape attr
-      if (chart.customAttr) {
-        const customAttr = JSON.parse(chart.customAttr)
-        if (customAttr.color) {
-          chart_option.color = customAttr.color.colors
-        }
-      }
       this.myEcharts(chart_option)
     },
     myEcharts(option) {