refine code && document

src/views/charts/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="components-container" >
     <code>
-      这里的所有的图表都基于echarts,实例代码来源<a href='http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all' target='_blank'>gallery</a><br/>其实echarts封装的很好了，用vue封装是很简单的事情，建议大家自己来封装。
+      这里的所有的图表都基于ECharts,实例代码来源<a href='http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all' target='_blank'>gallery</a><br/>其实ECharts封装的很好了，用vue封装是很简单的事情，建议大家自己来封装。<a target='_blank' class='lin' href="https://segmentfault.com/a/1190000009762198#articleHeader16">相关教程</a>
     </code>
   </div>
 </template>

src/views/charts/keyboard.vue

@@ -1,14 +1,13 @@
 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-       <keyboardChart height='100%' width='100%' />
+      <keyboardChart height='100%' width='100%' />
     </div>
-
   </div>
 </template>
+
 <script>
     import keyboardChart from 'components/Charts/keyboard';
-
     export default {
       components: { keyboardChart }
     };
@@ -16,9 +15,9 @@
 
 <style scoped>
 .chart-container{
-    position: relative;
-    width: 100%;
-    height: 90%;
+  position: relative;
+  width: 100%;
+  height: 90%;
 }
 </style>
 

src/views/charts/keyboard2.vue

@@ -1,14 +1,13 @@
 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-       <keyboardChart2 id='apple' height='100%' width='100%' />
+      <keyboardChart2 id='apple' height='100%' width='100%' />
     </div>
-
   </div>
 </template>
+
 <script>
     import keyboardChart2 from 'components/Charts/keyboard2';
-
     export default {
       components: { keyboardChart2 }
     };
@@ -16,9 +15,9 @@
 
 <style scoped>
 .chart-container{
-    position: relative;
-    width: 100%;
-    height: 90%;
+  position: relative;
+  width: 100%;
+  height: 90%;
 }
 </style>
 

src/views/charts/line.vue

@@ -1,16 +1,13 @@
 <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%' />
+      <lineMarker height='100%' width='100%' />
     </div>
-
   </div>
 </template>
+
 <script>
     import lineMarker from 'components/Charts/lineMarker';
-
     export default {
       components: { lineMarker }
     };
@@ -18,9 +15,9 @@
 
 <style scoped>
 .chart-container{
-    position: relative;
-    width: 100%;
-    height: 80%;
+  position: relative;
+  width: 100%;
+  height: 80%;
 }
 </style>
 

src/views/charts/mixchart.vue

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