From 25322e0bb08fd8112c59c05913467550a8d09353 Mon Sep 17 00:00:00 2001
From: lin-xin <2981207131@qq.com>
Date: Sat, 5 May 2018 14:46:24 +0800
Subject: [PATCH] =?UTF-8?q?'=E6=9B=B4=E6=96=B0vue-schart=E7=89=88=E6=9C=AC?=
 =?UTF-8?q?'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                       |  2 +-
 src/components/common/Sidebar.vue  |  4 +++
 src/components/page/BaseCharts.vue | 55 +++++++++++++++++++++---------
 3 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index c32d48d..63abd20 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "vue-cropperjs": "^2.2.0",
     "vue-quill-editor": "3.0.6",
     "vue-router": "^3.0.1",
-    "vue-schart": "^0.1.4",
+    "vue-schart": "^1.0.0",
     "vuedraggable": "^2.16.0"
   },
   "devDependencies": {
diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue
index 9dec980..0289fcf 100644
--- a/src/components/common/Sidebar.vue
+++ b/src/components/common/Sidebar.vue
@@ -112,6 +112,10 @@
         left: 0;
         top: 70px;
         bottom:0;
+        overflow-y: scroll;
+    }
+    .sidebar::-webkit-scrollbar{
+        width: 0;
     }
     .sidebar-el-menu:not(.el-menu--collapse){
         width: 250px;
diff --git a/src/components/page/BaseCharts.vue b/src/components/page/BaseCharts.vue
index 43bc138..5a18f23 100644
--- a/src/components/page/BaseCharts.vue
+++ b/src/components/page/BaseCharts.vue
@@ -11,21 +11,21 @@
                 vue-schart：vue.js封装sChart.js的图表组件。
                 访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
             </div>
-            <div class="schart">
+            <div class="schart-box">
                 <div class="content-title">柱状图</div>
-                <schart canvasId="bar" width="500" height="400" :data="data1" type="bar" :options="options1"></schart>
+                <schart class="schart" canvasId="bar" :data="data1" type="bar" :options="options1"></schart>
             </div>
-            <div class="schart">
+            <div class="schart-box">
             <div class="content-title">折线图</div>
-            <schart canvasId="line" width="500" height="400" :data="data1" type="line" :options="options1"></schart>
+            <schart class="schart" canvasId="line" :data="data1" type="line" :options="options2"></schart>
             </div>
-            <div class="schart">
+            <div class="schart-box">
             <div class="content-title">饼状图</div>
-            <schart canvasId="pie" width="500" height="400" :data="data2" type="pie" :options="options2"></schart>
+            <schart class="schart" canvasId="pie" :data="data2" type="pie" :options="options3"></schart>
             </div>
-            <div class="schart">
+            <div class="schart-box">
             <div class="content-title">环形图</div>
-            <schart canvasId="ring" width="500" height="400" :data="data2" type="ring" :options="options2"></schart>
+            <schart class="schart" canvasId="ring" :data="data2" type="ring" :options="options4"></schart>
             </div>
         </div>
     </div>
@@ -55,26 +55,47 @@
             ],
             options1: {
                 title: '某商店近年营业总额',
-                bgColor: '#009688',
-                titleColor: '#ffffff',
-                fillColor: '#e0f2f1',
-                axisColor: '#ffffff',
-                contentColor: '#999'
+                autoWidth: true,   // 设置宽高自适应
+                showValue: false,
+                bgColor: '#F9EFCC',
+                fillColor: '#00887C',
+                contentColor: 'rgba(46,199,201,0.3)',
+                yEqual: 7
             },
             options2: {
+                title: '某商店近年营业总额',
+                bgColor: '#D5E4EB',
+                titleColor: '#00887C',
+                fillColor: 'red',
+                contentColor: 'rgba(46,199,201,0.3)'
+            },
+            options3: {
+                title: '某商店各商品年度销量',
+                bgColor: '#829dca',
+                titleColor: '#ffffff',
+                legendColor: '#ffffff',
+                radius: 120
+            },
+            options4: {
                 title: '某商店各商品年度销量',
-                bgColor: '#607d8b',
+                bgColor: '#829daa',
                 titleColor: '#ffffff',
-                legendColor: '#ffffff'
+                legendColor: '#ffffff',
+                radius: 120,
+                innerRadius:80
             }
         })
     }
 </script>
 
 <style scoped>
+.schart-box{
+    display: inline-block;
+    margin: 20px;
+}
     .schart{
-        width: 600px;
-        display: inline-block;
+        width: 500px;
+        height: 400px;
     }
     .content-title{
         clear: both;
-- 
GitLab