add

src/views/charts/keyboard.vue

@@ -10,12 +10,7 @@
     import keyboardChart from 'components/Charts/keyboard';
 
     export default {
-      components: { keyboardChart },
-      data() {
-        return {
-
-        }
-      }
+      components: { keyboardChart }
     };
 </script>
 
@@ -23,7 +18,7 @@
 .chart-container{
     position: relative;
     width: 100%;
-    height: 100%;
+    height: 90%;
 }
 </style>
 

src/views/charts/keyboard2.vue

@@ -10,12 +10,7 @@
     import keyboardChart2 from 'components/Charts/keyboard2';
 
     export default {
-      components: { keyboardChart2 },
-      data() {
-        return {
-
-        }
-      }
+      components: { keyboardChart2 }
     };
 </script>
 
@@ -23,7 +18,7 @@
 .chart-container{
     position: relative;
     width: 100%;
-    height: 100%;
+    height: 90%;
 }
 </style>
 

src/views/charts/line.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="components-container" style='height:100vh'>
+    https://github.com/ecomfe/echarts/blob/master/index.js
+    http://echarts.baidu.com/tutorial.html
+    <div class='chart-container'>
+       <lineMarker height='100%' width='100%' />
+    </div>
+
+  </div>
+</template>
+<script>
+    import lineMarker from 'components/Charts/lineMarker';
+
+    export default {
+      components: { lineMarker }
+    };
+</script>
+
+<style scoped>
+.chart-container{
+    position: relative;
+    width: 100%;
+    height: 80%;
+}
+</style>
+

src/views/charts/markdown.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="components-container">
-    <code>公司做的后台主要是一个cms系统，公司也是已自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code>
-    <div class="editor-container">
-      <MdEditor  id='contentEditor' ref="contentEditor" v-model='content' :height="150"></MdEditor>
-    </div>
-  </div>
-</template>
-<script>
-    import MdEditor from 'components/MdEditor';
-
-    export default {
-      components: { MdEditor },
-      data() {
-        return {
-          content: 'Simplemde'
-        }
-      }
-    };
-</script>
-
-

src/views/charts/mixchart.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="components-container" style='height:100vh'>
+    <div class='chart-container'>
+       <mixchart id='apple' height='100%' width='100%' />
+    </div>
+
+  </div>
+</template>
+<script>
+    import mixchart from 'components/Charts/mixchart';
+
+    export default {
+      components: { mixchart }
+    };
+</script>
+
+<style scoped>
+.chart-container{
+    position: relative;
+    width: 100%;
+    height: 90%;
+    padding-bottom: 40px;
+}
+</style>
+

src/views/charts/tinymce.vue

@@ -1,28 +0,0 @@
-<template>
-  <div class="components-container">
-    <code>公司做的后台主要是一个cms系统，公司也是已自媒体为核心的，所以富文本是后台很核心的功能。在选择富文本的过程中也走了不少的弯路，市面上常见的富文本都基本用过了，最终选择了tinymce</code>
-    <div class="editor-container">
-      <Tinymce :height=200 ref="editor" v-model="content"></Tinymce>
-    </div>
-    <!--<div class='editor-content'>
-{{content}}
-    </div>-->
-  </div>
-</template>
-<script>
-    import Tinymce from 'components/Tinymce';
-
-    export default {
-      components: { Tinymce },
-      data() {
-        return {
-          content: 'Tinymce'
-        }
-      },
-      methods: {
-
-      }
-    };
-</script>
-
-