Update readme

README.md

@@ -37,7 +37,6 @@
 	|           |-- BaseTable.vue        // 基础表格
 	|           |-- Login.vue          	 // 登录
 	|           |-- Markdown.vue         // markdown组件
-	|           |-- MixCharts.vue        // 混合图表
 	|           |-- Readme.vue           // 自述组件
 	|           |-- Upload.vue           // 图片上传
 	|           |-- VueEditor.vue        // 富文本编辑器
@@ -54,9 +53,9 @@
 
 ## 安装步骤 ##
 
-	git clone https://github.com/lin-xin/manage-system.git		// 把模板下载到本地
-	cd manage-system											// 进入模板目录
-	npm install													// 安装项目依赖，等待安装完成之后
+	git clone https://github.com/lin-xin/manage-system.git      // 把模板下载到本地
+	cd manage-system    // 进入模板目录
+	npm install         // 安装项目依赖，等待安装完成之后
 
 ## 本地开发 ##
 
@@ -89,20 +88,20 @@
 </template>
 
 <script>
-	import Datasource from 'vue-datasource';					// 导入quillEditor组件
+	import Datasource from 'vue-datasource';    // 导入quillEditor组件
     export default {
         data: function(){
             return {
                 information: {
-	                pagination: {...},						// 页码配置
+	                pagination: {...},  // 页码配置
 	                data: [...]
 	            },
-	            columns: [...],								// 列名配置
-	            actions: [...]								// 功能配置
+	            columns: [...],     // 列名配置
+	            actions: [...]      // 功能配置
             }
         },
         components: {
-            Datasource										// 声明组件Datasource
+            Datasource
         },
 	    methods: {
 	        changePage(values) {...},
@@ -124,18 +123,18 @@
 </template>
 
 <script>
-	import { quillEditor } from 'vue-quill-editor';			// 导入quillEditor组件
+	import { quillEditor } from 'vue-quill-editor';     // 导入quillEditor组件
     export default {
         data: function(){
             return {
-                content: '',								// 编辑器的内容
-                editorOption: {								// 编辑器的配置
+                content: '',        // 编辑器的内容
+                editorOption: {     // 编辑器的配置
                     // something config
                 }
             }
         },
         components: {
-            quillEditor										// 声明组件quillEditor
+            quillEditor
         }
 	}
 </script>
@@ -152,17 +151,17 @@ Vue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.c
 </template>
 
 <script>
-    import { markdownEditor } from 'vue-simplemde';			// 导入markdownEditor组件
+    import { markdownEditor } from 'vue-simplemde';     // 导入markdownEditor组件
     export default {
         data: function(){
             return {
-                content:'',									// markdown编辑器内容
-                configs: {									// markdown编辑器配置参数
-                    status: false,							// 禁用底部状态栏
-                    initialValue: 'Hello BBK',				// 设置初始值
+                content:'',             // markdown编辑器内容
+                configs: {              // markdown编辑器配置参数
+                    status: false,      // 禁用底部状态栏
+                    initialValue: 'Hello BBK',      // 设置初始值
                     renderingConfig: {
-                        codeSyntaxHighlighting: true,		// 开启代码高亮
-                        highlightingTheme: 'atom-one-light' // 自定义代码高亮主题
+                        codeSyntaxHighlighting: true,       // 开启代码高亮
+                        highlightingTheme: 'atom-one-light'     // 自定义代码高亮主题
                     }
                 }
             }
@@ -181,30 +180,30 @@ Vue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.c
 
 <template>
     <div>
-		<img :src="src">									// 用于显示上传的图片
+		<img :src="src">                // 用于显示上传的图片
         <vue-core-image-upload :class="['pure-button','pure-button-primary','js-btn-crop']"
-           :crop="true"										// 是否裁剪
+           :crop="true"	                // 是否裁剪
            text="上传图片"
-           url=""											// 上传路径
-           extensions="png,gif,jpeg,jpg"					// 限制文件类型
-           @:imageuploaded="imageuploaded">					// 监听图片上传完成事件
+           url=""                       // 上传路径
+           extensions="png,gif,jpeg,jpg"        // 限制文件类型
+           @:imageuploaded="imageuploaded">     // 监听图片上传完成事件
 		</vue-core-image-upload>
     </div>
 </template>
 
 <script>
-    import VueCoreImageUpload  from 'vue-core-image-upload';	// 导入VueCoreImageUpload组件
+    import VueCoreImageUpload  from 'vue-core-image-upload';    // 导入VueCoreImageUpload组件
     export default {
         data: function(){
             return {
-                src:'../img/1.jpg'							// 默认显示图片地址
+                src:'../img/1.jpg'      // 默认显示图片地址
             }
         },
         components: {
-            VueCoreImageUpload								// 声明组件VueCoreImageUpload
+            VueCoreImageUpload          // 声明组件VueCoreImageUpload
         },
         methods:{
-            imageuploaded(res) {							// 定义上传完成执行的方法
+            imageuploaded(res) {        // 定义上传完成执行的方法
                 console.log(res)
             }
         }
@@ -213,40 +212,44 @@ Vue.js的Markdown Editor组件。访问地址：[Vue-SimpleMDE](https://github.c
 
 ```
 
-### vue-echarts-v3 ###
-基于vue2和eCharts.js3的图表组件。访问地址：[vue-echarts-v3](https://github.com/xlsdg/vue-echarts-v3)
+### vue-schart ###
+vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart)
 
 ```JavaScript
 <template>
     <div>
-        <IEcharts :option="bar"></IEcharts>
+        <schart :canvasId="canvasId"
+				:type="type"
+				:width="width"
+				:height="height"
+				:data="data"
+				:options="options"
+		></schart>
     </div>
 </template>
 	
 <script>
-    import IEcharts from 'vue-echarts-v3';					// 导入IEcharts组件
+    import Schart from 'vue-schart';        // 导入Schart组件
     export default {
         data: function(){
             return {
-                bar: {
-			        title: {
-			          text: '柱状图'							// 图标标题文本
-			        },
-			        tooltip: {},	
-			        xAxis: {								// 横坐标
-			          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
-			        },
-			        yAxis: {},								// 纵坐标
-			        series: [{
-			          name: '销量',
-			          type: 'bar',							// 图标类型
-			          data: [5, 20, 36, 10, 10, 20]
-			        }]
-			   	}
+                canvasId: 'myCanvas',       // canvas的id
+                type: 'bar',                // 图表类型
+                width: 500,
+                height: 400,
+                data: [
+                    {name: '2014', value: 1342},
+                    {name: '2015', value: 2123},
+                    {name: '2016', value: 1654},
+                    {name: '2017', value: 1795},
+                ],
+                options: {                  // 图表可选参数
+                    title: 'Total sales of stores in recent years'
+                }
             }
         },
         components: {
-            IEcharts								// 声明组件VueCoreImageUpload
+            Schart
         }
     }
 </script>

README_EN.md

@@ -68,10 +68,10 @@ The scheme as a set of multi-function background frame templates, suitable for m
 ## Component description and presentation ##
 
 ### element-ui ###
-A desktop component library based on vue.js2.0 . live demo：[element](http://element.eleme.io/#/zh-CN/component/layout)
+A desktop component library based on vue.js2.0 . Github : [element](http://element.eleme.io/#/zh-CN/component/layout)
 
 ### vue-datasource ###
-A Vue.js server side component to create dynamic tables. live demo：[vue-datasource](https://github.com/coderdiaz/vue-datasource)
+A Vue.js server side component to create dynamic tables. Github : [vue-datasource](https://github.com/coderdiaz/vue-datasource)
 
 ```JavaScript
 <template>
@@ -86,16 +86,16 @@ A Vue.js server side component to create dynamic tables. live demo：[vue-dataso
 </template>
 
 <script>
-	import Datasource from 'vue-datasource';					// import Datasource component
+	import Datasource from 'vue-datasource';        // import Datasource component
     export default {
         data: function(){
             return {
                 information: {
-	                pagination: {...},						// pagination config
+	                pagination: {...},              // pagination config
 	                data: [...]
 	            },
-	            columns: [...],								// col config
-	            actions: [...]								// function config
+	            columns: [...],                     // col config
+	            actions: [...]                      // function config
             }
         },
         components: {
@@ -111,7 +111,7 @@ A Vue.js server side component to create dynamic tables. live demo：[vue-dataso
 
 
 ### Vue-Quill-Editor ###
-Quill editor component for Vue2. live demo：[vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
+Quill editor component for Vue2. Github : [vue-quill-editor](https://github.com/surmon-china/vue-quill-editor)
 
 ```JavaScript
 <template>
@@ -121,7 +121,7 @@ Quill editor component for Vue2. live demo：[vue-quill-editor](https://github.c
 </template>
 
 <script>
-	import { quillEditor } from 'vue-quill-editor';			// import quillEditor component
+	import { quillEditor } from 'vue-quill-editor';     // import quillEditor component
     export default {
         data: function(){
             return {
@@ -139,7 +139,7 @@ Quill editor component for Vue2. live demo：[vue-quill-editor](https://github.c
 ```
 
 ### Vue-SimpleMDE ###
-Markdown Editor component for Vue.js. live demo：[Vue-SimpleMDE](https://github.com/F-loat/vue-simplemde)
+Markdown Editor component for Vue.js. Github : [Vue-SimpleMDE](https://github.com/F-loat/vue-simplemde)
 
 ```JavaScript
 <template>
@@ -172,7 +172,7 @@ Markdown Editor component for Vue.js. live demo：[Vue-SimpleMDE](https://github
 ```
 
 ### Vue-Core-Image-Upload ###
-a vue plugin for image upload and crop. live demo：[Vue-Core-Image-Upload](https://github.com/Vanthink-UED/vue-core-image-upload)
+a vue plugin for image upload and crop. Github : [Vue-Core-Image-Upload](https://github.com/Vanthink-UED/vue-core-image-upload)
 
 ```JavaScript
 
@@ -210,40 +210,44 @@ a vue plugin for image upload and crop. live demo：[Vue-Core-Image-Upload](http
 
 ```
 
-### vue-echarts-v3 ###
-Vue.js v2.x+ component wrap for ECharts.js v3.x+. live demo：[vue-echarts-v3](https://github.com/xlsdg/vue-echarts-v3)
+### vue-schart ###
+Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/linxin/vue-schart)
 
 ```JavaScript
 <template>
     <div>
-        <IEcharts :option="bar"></IEcharts>
+        <schart :canvasId="canvasId"
+				:type="type"
+				:width="width"
+				:height="height"
+				:data="data"
+				:options="options"
+		></schart>
     </div>
 </template>
 	
 <script>
-    import IEcharts from 'vue-echarts-v3';					
+    import Schart from 'vue-schart';
     export default {
         data: function(){
             return {
-                bar: {
-			        title: {
-			          text: '柱状图'							
-			        },
-			        tooltip: {},	
-			        xAxis: {								
-			          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
-			        },
-			        yAxis: {},								
-			        series: [{
-			          name: '销量',
-			          type: 'bar',							
-			          data: [5, 20, 36, 10, 10, 20]
-			        }]
-			   	}
+                canvasId: 'myCanvas',
+                type: 'bar',
+                width: 500,
+                height: 400,
+                data: [
+                    {name: '2014', value: 1342},
+                    {name: '2015', value: 2123},
+                    {name: '2016', value: 1654},
+                    {name: '2017', value: 1795},
+                ],
+                options: {
+                    title: 'Total sales of stores in recent years'
+                }
             }
         },
         components: {
-            IEcharts								
+            Schart
         }
     }
 </script>