Merge pull request #9 from lin-xin/dev

release:V2.0.0

Author: lin-xin

LICENCE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2017 林鑫
+Copyright (c) 2017-2019 林鑫
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -11,8 +11,6 @@
 
 Support for use at the mobile. Support vue.js 1.x & 2.x
 
-[interactive demo](http://blog.gdfengshuo.com/example/#/vue-schart)
-
 ## Usage
 
 Install:
@@ -26,24 +24,36 @@ Use in component:
 ```html
 <template>
     <div id="app">
-        <schart class="wrapper" :canvasId="canvasId" :type="type" :data="data" :options="options"></schart>
+        <schart class="wrapper" canvasId="canvas" :options="options" />
     </div>
 </template>
 <script>
-import Schart from 'vue-schart';
+	import Schart from 'vue-schart';
 	export default {
 		data() {
 			return {
-				canvasId: 'myCanvas',
-				type: 'bar',
-				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'
+					type: "bar",
+					title: {
+						text: "最近一周各品类销售图"
+					},
+					bgColor: "#fbfbfb",
+					labels: ["周一", "周二", "周三", "周四", "周五"],
+					datasets: [
+						{
+							label: "家电",
+							fillColor: "rgba(241, 49, 74, 0.5)",
+							data: [234, 278, 270, 190, 230]
+						},
+						{
+							label: "百货",
+							data: [164, 178, 190, 135, 160]
+						},
+						{
+							label: "食品",
+							data: [144, 198, 150, 235, 120]
+						}
+					]
 				}
 			}
 		},
@@ -62,11 +72,7 @@ import Schart from 'vue-schart';
 ```
 ## Options
 
-Refer to [the documentation for sChart.js](http://blog.gdfengshuo.com/example/sChart/).
-
-## Demo
-
-![demo](http://blog.gdfengshuo.com/example/sChart/static/img/demo.png)
+Refer to [the documentation for sChart.js](https://lin-xin.gitee.io/example/schart/).
 
 ## License
 [MIT license](https://github.com/lin-xin/vue-schart/blob/master/LICENCE).

example/package.json

@@ -10,7 +10,7 @@
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
   },
   "dependencies": {
-    "schart.js": "^2.0.0",
+    "schart.js": "^3.0.0",
     "vue": "^2.5.11"
   },
   "browserslist": [

example/src/App.vue

@@ -1,56 +1,80 @@
 <template>
-  <div id="app">
-    <schart class="wrapper" :canvasId="canvasId" :type="type" :data="data" :options="options"></schart>
-		<schart class="wrapper" canvasId="canvas1" type="pie" :data="data" :options="options"></schart>
-    <button @click="change">change</button>
-  </div>
+    <div id="app">
+        <schart class="wrapper" canvasId="canvas" :options="options"></schart>
+        <button @click="change('bar')">change to bar</button>
+        <button @click="change('line')">change to line</button>
+        <button @click="change('pie')">change to pie</button>
+        <button @click="change('ring')">change to ring</button>
+    </div>
 </template>
 
 <script>
-import Schart from './vue-schart.vue';
+import Schart from "./vue-schart";
 export default {
-  name: 'app',
-  data () {
-    return {
-			flag: false,
-      canvasId: 'myCanvas',
-			type: 'bar',
-			data: [
-				{name: '2014', value: 1342},
-				{name: '2015', value: 2123},
-				{name: '2016', value: 841},
-        {name: '2015', value: 2123},
-				{name: '2016', value: 589},
-				{name: '2017', value: 1795},
-			],
-			options: {
-				title: 'Total sales of stores in recent years',
-				bottomPadding: 30
-			}
+    name: "app",
+    data() {
+        return {
+            options: {
+                type: "bar",
+                title: {
+                    text: "最近一周各品类销售图"
+                },
+                bgColor: "#fbfbfb",
+                labels: ["周一", "周二", "周三", "周四", "周五"],
+                datasets: [
+                    {
+                        label: "家电",
+                        fillColor: "rgba(241, 49, 74, 0.5)",
+                        data: [234, 278, 270, 190, 230]
+                    },
+                    {
+                        label: "百货",
+                        data: [164, 178, 190, 135, 160]
+                    },
+                    {
+                        label: "食品",
+                        data: [144, 198, 150, 235, 120]
+                    }
+                ]
+            }
+        };
+    },
+    created() {
+        this.getData();
+    },
+    components: {
+        Schart
+    },
+    methods: {
+        getData() {
+            setTimeout(() => {
+                const data = [
+                    {
+                        label: "家电",
+                        fillColor: "rgba(241, 49, 74, 0.5)",
+                        data: [234, 278, 270, 190, 230]
+                    },
+                    {
+                        label: "百货",
+                        data: [164, 178, 190, 135, 160]
+                    },
+                    {
+                        label: "食品",
+                        data: [144, 198, 150, 235, 120]
+                    }
+                ];
+                this.$set(this.options1, "datasets", data);
+            }, 1000);
+        },
+        change(type) {
+            this.$set(this.options1, "type", type);
+        }
     }
-  },
-  components:{
-		Schart
-	},
-  methods: {
-    change(){
-      this.data = [
-        {name: '2015', value: 2123},
-				{name: '2016', value: 589},
-				{name: '2017', value: 1795},
-        {name: '2014', value: 1342},
-			];
-			this.type = 'line';
-			this.$set(this.options, 'title', '哈哈哈哈哈哈')
-    }
-  }
-}
+};
 </script>
 <style>
-.wrapper{
-	width: 500px;
-	height: 400px;
-  /* width: 7rem;
-  height: 5rem; */
+.wrapper {
+    width: 500px;
+    height: 400px;
 }
 </style>

example/src/vue-schart.vue

@@ -5,59 +5,48 @@
 </template>
 
 <script>
-    import sChart from 'schart.js';
-    export default {
-        data() {
-            return {
-                schart: null,
-                opt: {}
-            }
+import Schart from "schart.js";
+export default {
+    props: {
+        canvasId: {
+            type: String,
+            default: "",
+            required: true
         },
-        props: {
-            canvasId: {
-                type: String,
-                default: ''
-            },
-            type: {
-                type: String,
-                default: 'bar',
-            },
-            data: {
-                type: Array,
-                default: [],
-            },
-            options: {
-                type: Object,
-                required: false
+        options: {
+            type: Object,
+            required: true
+        }
+    },
+    mounted() {
+        this.renderChart();
+    },
+    methods: {
+        renderChart() {
+            if (!this.checkOptions()) {
+                return;
             }
+            const opt = { ...this.options };
+            new Schart(this.canvasId, opt);
         },
-        mounted() {
-            this.renderChart();
-        },
-        methods: {
-            renderChart(){
-                this.schart = null;
-                this.opt = this.options;
-                if(!this.width || !this.height){
-                    if(!this.opt){
-                        this.opt = {autoWidth: true};
-                    }else{
-                        this.opt['autoWidth'] = true;
-                    }
-                }
-                this.schart = new sChart(this.canvasId, this.type, this.data, this.opt);
+        checkOptions() {
+            const opt = this.options;
+            if (!opt.datasets || !opt.datasets.length) {
+                return false;
             }
-        },
-        watch: {
-            data(){
-                this.renderChart();
-            },
-            options(){
+            if (!opt.labels || !opt.labels.length) {
+                return false;
+            }
+            return true;
+        }
+    },
+    watch: {
+        options: {
+            handler(newValue, oldValue) {
                 this.renderChart();
             },
-            type(){
-                this.renderChart();
-            }
+            deep: true
         }
     }
+};
 </script>

package.json

@@ -1,13 +1,12 @@
 {
   "name": "vue-schart",
   "description": "Vue.js wrapper for sChart.js",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "author": "lin-xin <[email protected]>",
   "main": "src/vue-schart.vue",
-  "scripts": {
-  },
+  "scripts": {},
   "dependencies": {
-    "schart.js": "^2.0.0"
+    "schart.js": "^3.0.0"
   },
   "repository": {
     "type": "git",
@@ -24,4 +23,4 @@
   "bugs": {
     "url": "https://github.com/lin-xin/vue-schart/issues"
   }
-}
+}