refactor:add keep-alive && component add name

src/views/charts/keyboard.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <keyboard-chart height='100%' width='100%'></keyboard-chart>
+      <chart height='100%' width='100%'></chart>
     </div>
   </div>
 </template>
 
 <script>
-import keyboardChart from '@/components/Charts/keyboard'
+import Chart from '@/components/Charts/keyboard'
 
 export default {
-  components: { keyboardChart }
+  name: 'keyboardChart',
+  components: { Chart }
 }
 </script>
 

src/views/charts/keyboard2.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <keyboard-chart2 height='100%' width='100%'></keyboard-chart2>
+      <chart height='100%' width='100%'></chart>
     </div>
   </div>
 </template>
 
 <script>
-import keyboardChart2 from '@/components/Charts/keyboard2'
+import Chart from '@/components/Charts/keyboard2'
 
 export default {
-  components: { keyboardChart2 }
+  name: 'keyboardChart2',
+  components: { Chart }
 }
 </script>
 

src/views/charts/line.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <line-marker height='100%' width='100%'></line-marker>
+      <chart height='100%' width='100%'></chart>
     </div>
   </div>
 </template>
 
 <script>
-import lineMarker from '@/components/Charts/lineMarker'
+import Chart from '@/components/Charts/lineMarker'
 
 export default {
-  components: { lineMarker }
+  name: 'lineChart',
+  components: { Chart }
 }
 </script>
 

src/views/charts/mixChart.vue

@@ -1,16 +1,17 @@
 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <mix-chart height='100%' width='100%'></mix-chart>
+      <chart height='100%' width='100%'></chart>
     </div>
   </div>
 </template>
 
 <script>
-import mixChart from '@/components/Charts/mixChart'
+import Chart from '@/components/Charts/mixChart'
 
 export default {
-  components: { mixChart }
+  name: 'mixChart',
+  components: { Chart }
 }
 </script>