diff --git a/src/components/Charts/Keyboard.vue b/src/components/Charts/Keyboard.vue
index 0b258f36..e34e0c04 100644
--- a/src/components/Charts/Keyboard.vue
+++ b/src/components/Charts/Keyboard.vue
@@ -5,6 +5,7 @@
 <script>
 import echarts from 'echarts'
 import resize from './mixins/resize'
+import { generateChartData, getChartOptions } from '@/utils/chartHelpers'
 
 export default {
   mixins: [resize],
@@ -44,111 +45,9 @@ export default {
   methods: {
     initChart() {
       this.chart = echarts.init(document.getElementById(this.id))
-
-      const xAxisData = []
-      const data = []
-      const data2 = []
-      for (let i = 0; i < 50; i++) {
-        xAxisData.push(i)
-        data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
-        data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
-      }
-      this.chart.setOption({
-        backgroundColor: '#08263a',
-        grid: {
-          left: '5%',
-          right: '5%'
-        },
-        xAxis: [{
-          show: false,
-          data: xAxisData
-        }, {
-          show: false,
-          data: xAxisData
-        }],
-        visualMap: {
-          show: false,
-          min: 0,
-          max: 50,
-          dimension: 0,
-          inRange: {
-            color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
-          }
-        },
-        yAxis: {
-          axisLine: {
-            show: false
-          },
-          axisLabel: {
-            textStyle: {
-              color: '#4a657a'
-            }
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              color: '#08263f'
-            }
-          },
-          axisTick: {
-            show: false
-          }
-        },
-        series: [{
-          name: 'back',
-          type: 'bar',
-          data: data2,
-          z: 1,
-          itemStyle: {
-            normal: {
-              opacity: 0.4,
-              barBorderRadius: 5,
-              shadowBlur: 3,
-              shadowColor: '#111'
-            }
-          }
-        }, {
-          name: 'Simulate Shadow',
-          type: 'line',
-          data,
-          z: 2,
-          showSymbol: false,
-          animationDelay: 0,
-          animationEasing: 'linear',
-          animationDuration: 1200,
-          lineStyle: {
-            normal: {
-              color: 'transparent'
-            }
-          },
-          areaStyle: {
-            normal: {
-              color: '#08263a',
-              shadowBlur: 50,
-              shadowColor: '#000'
-            }
-          }
-        }, {
-          name: 'front',
-          type: 'bar',
-          data,
-          xAxisIndex: 1,
-          z: 3,
-          itemStyle: {
-            normal: {
-              barBorderRadius: 5
-            }
-          }
-        }],
-        animationEasing: 'elasticOut',
-        animationEasingUpdate: 'elasticOut',
-        animationDelay(idx) {
-          return idx * 20
-        },
-        animationDelayUpdate(idx) {
-          return idx * 20
-        }
-      })
+      const { xAxisData, data, data2 } = generateChartData()
+      const options = getChartOptions(xAxisData, data, data2)
+      this.chart.setOption(options)
     }
   }
 }
diff --git a/src/utils/chartHelpers.js b/src/utils/chartHelpers.js
new file mode 100644
index 00000000..eecbe101
--- /dev/null
+++ b/src/utils/chartHelpers.js
@@ -0,0 +1,93 @@
+export function generateChartData() {
+  const xAxisData = []
+  const data = []
+  const data2 = []
+  for (let i = 0; i < 50; i++) {
+    xAxisData.push(i)
+    data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
+    data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
+  }
+  return { xAxisData, data, data2 }
+}
+
+export function getChartOptions(xAxisData, data, data2) {
+  return {
+    backgroundColor: '#08263a',
+    grid: {
+      left: '5%',
+      right: '5%'
+    },
+    xAxis: [
+      { show: false, data: xAxisData },
+      { show: false, data: xAxisData }
+    ],
+    visualMap: {
+      show: false,
+      min: 0,
+      max: 50,
+      dimension: 0,
+      inRange: {
+        color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
+      }
+    },
+    yAxis: {
+      axisLine: { show: false },
+      axisLabel: { textStyle: { color: '#4a657a' }},
+      splitLine: {
+        show: true,
+        lineStyle: { color: '#08263f' }
+      },
+      axisTick: { show: false }
+    },
+    series: [
+      {
+        name: 'back',
+        type: 'bar',
+        data: data2,
+        z: 1,
+        itemStyle: {
+          normal: {
+            opacity: 0.4,
+            barBorderRadius: 5,
+            shadowBlur: 3,
+            shadowColor: '#111'
+          }
+        }
+      },
+      {
+        name: 'Simulate Shadow',
+        type: 'line',
+        data,
+        z: 2,
+        showSymbol: false,
+        animationDelay: 0,
+        animationEasing: 'linear',
+        animationDuration: 1200,
+        lineStyle: { normal: { color: 'transparent' }},
+        areaStyle: {
+          normal: {
+            color: '#08263a',
+            shadowBlur: 50,
+            shadowColor: '#000'
+          }
+        }
+      },
+      {
+        name: 'front',
+        type: 'bar',
+        data,
+        xAxisIndex: 1,
+        z: 3,
+        itemStyle: { normal: { barBorderRadius: 5 }}
+      }
+    ],
+    animationEasing: 'elasticOut',
+    animationEasingUpdate: 'elasticOut',
+    animationDelay(idx) {
+      return idx * 20
+    },
+    animationDelayUpdate(idx) {
+      return idx * 20
+    }
+  }
+}