├── .gitignore
├── package.json
├── LICENCE
├── README.md
└── src
    └── vue-schart.vue


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log
5 | yarn-error.log
6 | .npmignore


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-schart",
 3 |   "description": "Vue.js wrapper for sChart.js",
 4 |   "version": "0.1.4",
 5 |   "author": "lin-xin <2981207131@qq.com>",
 6 |   "main": "src/vue-schart.vue",
 7 |   "scripts": {
 8 |   },
 9 |   "dependencies": {
10 |     "schart.js": "^1.0.2"
11 |   },
12 |   "devDependencies": {
13 |     "babel-core": "^6.0.0",
14 |     "babel-loader": "^6.0.0",
15 |     "babel-preset-latest": "^6.0.0",
16 |     "cross-env": "^3.0.0",
17 |     "css-loader": "^0.25.0",
18 |     "file-loader": "^0.9.0",
19 |     "vue-loader": "^12.1.0",
20 |     "vue-template-compiler": "^2.3.3",
21 |     "webpack": "^2.6.1",
22 |     "webpack-dev-server": "^2.4.5"
23 |   },
24 |   "repository": {
25 |     "type": "git",
26 |     "url": "git+https://github.com/lin-xin/vue-schart.git"
27 |   },
28 |   "keywords": [
29 |     "schart.js",
30 |     "charts",
31 |     "vue-schart",
32 |     "图表",
33 |     "vue.js插件"
34 |   ],
35 |   "license": "MIT",
36 |   "bugs": {
37 |     "url": "https://github.com/lin-xin/vue-schart/issues"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/LICENCE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 林鑫
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # vue-schart 
 3 | 
 4 | >  :bar_chart: Vue.js wrapper for sChart.js
 5 | 
 6 | <p>
 7 |   <a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/dm/vue-schart.svg" alt="Downloads"></a>
 8 |   <a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/v/vue-schart.svg" alt="Version"></a>
 9 |   <a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/l/vue-schart.svg" alt="License"></a>
10 |   <br>
11 | </p>
12 | 
13 | Support vue.js 1.x & 2.x
14 | 
15 | [interactive demo](http://blog.gdfengshuo.com/example/#/vue-schart)
16 | 
17 | ## Usage
18 | Install:
19 | 
20 | ```
21 | npm install vue-schart -S
22 | ```
23 | 
24 | Use in component:
25 | 
26 | ```javascript
27 | <template>
28 |     <div id="app">
29 |         <schart :canvasId="canvasId"
30 | 			:type="type"
31 | 			:width="width"
32 | 			:height="height"
33 | 			:data="data"
34 | 			:options="options"
35 | 		></schart>
36 |     </div>
37 | </template>
38 | import Schart from 'vue-schart';
39 | export default {
40 | 	data() {
41 | 		return {
42 | 			canvasId: 'myCanvas',
43 | 			type: 'bar',
44 | 			width: 500,
45 | 			height: 400,
46 | 			data: [
47 | 				{name: '2014', value: 1342},
48 | 				{name: '2015', value: 2123},
49 | 				{name: '2016', value: 1654},
50 | 				{name: '2017', value: 1795},
51 | 			],
52 | 			options: {
53 | 				title: 'Total sales of stores in recent years'
54 | 			}
55 | 		}
56 | 	},
57 |     components:{
58 | 		Schart
59 | 	}
60 | }
61 | ```
62 | ## Options
63 | 
64 | Refer to [the documentation for sChart.js](http://open.omwteam.com/sChart/en.html).
65 | 
66 | ## Demo
67 | 
68 | ![demo](http://open.omwteam.com/sChart/static/img/demo.jpg)
69 | 
70 | ## License
71 | [MIT license](https://github.com/lin-xin/vue-schart/blob/master/LICENCE).


--------------------------------------------------------------------------------
/src/vue-schart.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <canvas :id="canvasId" :width="width" :height="height"></canvas>
 4 |     </div>
 5 | </template>
 6 | 
 7 | <script>
 8 |     import sChart from 'schart.js';
 9 |     export default {
10 |         data: function() {
11 |             return {}
12 |         },
13 |         props: {
14 |             canvasId: {
15 |                 type: String,
16 |                 default: ''
17 |             },
18 |             width: {
19 |                 type: [String, Number],
20 |                 default: 500
21 |             },
22 |             height: {
23 |                 type: [String, Number],
24 |                 default: 400
25 |             },
26 |             type: {
27 |                 type: String,
28 |                 default: 'bar',
29 |             },
30 |             data: {
31 |                 type: Array,
32 |                 default: [],
33 |             },
34 |             options: {
35 |                 type: Object,
36 |                 required: false
37 |             }
38 |         },
39 |         mounted: function() {
40 |             this.renderChart();
41 |         },
42 |         methods: {
43 |             renderChart: function(){
44 |                 var self = this;
45 |                 new sChart(self.canvasId, self.type, self.data, self.options);
46 |             }
47 |         },
48 |         watch: {
49 |             'data': function () {
50 |                 this.renderChart();
51 |             },
52 |             'options': function () {
53 |                 this.renderChart();
54 |             },
55 |             'type': function () {
56 |                 this.renderChart();
57 |             },
58 |             'width': function () {
59 |                 var self = this;
60 |                 self.$nextTick(function(){
61 |                     self.renderChart();
62 |                 })
63 |             },
64 |             'height': function () {
65 |                 var self = this;
66 |                 self.$nextTick(function(){
67 |                     self.renderChart();
68 |                 })
69 |             }
70 |         }
71 |     }
72 | </script>


--------------------------------------------------------------------------------