From d2d822f54156bad4be87cdf7c1096eb0ac8379d0 Mon Sep 17 00:00:00 2001
From: lin-xin <2981207131@qq.com>
Date: Tue, 21 Feb 2017 16:25:44 +0800
Subject: [PATCH] Complete vue-charts

---
 .editorconfig                                 |  2 +-
 package.json                                  |  2 +-
 src/components/common/sidebar.vue             |  3 +-
 .../page/{VueCharts.vue => BaseCharts.vue}    |  7 ++-
 src/components/page/MixCharts.vue             | 49 +++++++++++++++++++
 src/main.js                                   |  1 +
 src/router/index.js                           |  8 ++-
 7 files changed, 65 insertions(+), 7 deletions(-)
 rename src/components/page/{VueCharts.vue => BaseCharts.vue} (76%)
 create mode 100644 src/components/page/MixCharts.vue

diff --git a/.editorconfig b/.editorconfig
index 9d08a1a..e291365 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -3,7 +3,7 @@ root = true
 [*]
 charset = utf-8
 indent_style = space
-indent_size = 2
+indent_size = 4
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
diff --git a/package.json b/package.json
index 56bc99b..59937cc 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "axios": "^0.15.3",
-    "chart.js": "^2.5.0",
+    "chart.js": "^2.3.0",
     "element-ui": "^1.1.6",
     "hchs-vue-charts": "^1.2.7",
     "vue": "^2.1.10",
diff --git a/src/components/common/sidebar.vue b/src/components/common/sidebar.vue
index 70bbea7..5e0ad57 100644
--- a/src/components/common/sidebar.vue
+++ b/src/components/common/sidebar.vue
@@ -15,7 +15,8 @@
             </el-submenu>
             <el-submenu index="3">
                 <template slot="title"><i class="el-icon-star-on"></i>图表</template>
-                <el-menu-item index="vuecharts">VueCharts</el-menu-item>
+                <el-menu-item index="basecharts">基础图表</el-menu-item>
+                <el-menu-item index="mixcharts">混合图表</el-menu-item>
             </el-submenu>
         </el-menu>
     </div>
diff --git a/src/components/page/VueCharts.vue b/src/components/page/BaseCharts.vue
similarity index 76%
rename from src/components/page/VueCharts.vue
rename to src/components/page/BaseCharts.vue
index a39a10a..4622039 100644
--- a/src/components/page/VueCharts.vue
+++ b/src/components/page/BaseCharts.vue
@@ -3,7 +3,7 @@
         <div class="crumbs">
             <el-breadcrumb separator="/">
                 <el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
-                <el-breadcrumb-item>VueCharts</el-breadcrumb-item>
+                <el-breadcrumb-item>基础图表</el-breadcrumb-item>
             </el-breadcrumb>
         </div>
         <div class="plugins-tips">
@@ -15,7 +15,10 @@
                       :linetension="0"></chartjs-line>
         <chartjs-bar class="chart-box"
                      :datalabel="mylabel" :labels="mylabels" :data="mydata"></chartjs-bar>
-
+        <chartjs-pie class="chart-box"
+                     :datalabel="mylabel" :labels="mylabels" :data="mydata"></chartjs-pie>
+        <chartjs-doughnut class="chart-box"
+                     :datalabel="mylabel" :labels="mylabels" :data="mydata"></chartjs-doughnut>
     </div>
 </template>
 
diff --git a/src/components/page/MixCharts.vue b/src/components/page/MixCharts.vue
new file mode 100644
index 0000000..f46f7e3
--- /dev/null
+++ b/src/components/page/MixCharts.vue
@@ -0,0 +1,49 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
+                <el-breadcrumb-item>混合图表</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="plugins-tips">
+            vue-charts：基于vue2和chart.js的图表组件。
+            访问地址：<a href="https://github.com/hchstera/vue-charts" target="_blank">vue-charts</a>
+        </div>
+        <div class="mix-charts">
+            <canvas id="mix" count="3"></canvas>
+            <chartjs-line target="mix" bordercolor="#FF6384" :bind="true"
+                          :datalabel="mylabel" :labels="mylabels" :data="mydata"
+                          :linetension="0"></chartjs-line>
+            <chartjs-bar target="mix" backgroundcolor="#36A2EB" :bind="true"
+                         :datalabel="mylabel1" :labels="mylabels1" :data="mydata1"></chartjs-bar>
+            <chartjs-bar target="mix" backgroundcolor="#FFCE56" :bind="true"
+                         :datalabel="mylabel2" :labels="mylabels2" :data="mydata2"></chartjs-bar>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data: function(){
+            return {
+                mylabel : '2013-2017年价格趋势',
+                mylabels : ['2013','2014','2015', '2016', '2017'],
+                mydata : [15,30, 20, 50, 40],
+                mylabel1 : '2013-2017年价格趋势',
+                mylabels1 : ['2013','2014','2015', '2016', '2017'],
+                mydata1 : [20,25, 50, 90, 70],
+                mylabel2 : '2013-2017年价格趋势',
+                mylabels2 : ['2013','2014','2015', '2016', '2017'],
+                mydata2 : [40,50, 15, 60, 10]
+            }
+        }
+    }
+</script>
+
+<style>
+    .mix-charts{
+        width:100%;
+        max-width: 900px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 5f827cb..b700185 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import App from './App';
 import router from './router';
+// import VueCharts from 'vue-chartjs';
 require('chart.js/dist/Chart.bundle.min.js')
 require('hchs-vue-charts/dist/vue-charts.js')
 import ElementUI from 'element-ui';
diff --git a/src/router/index.js b/src/router/index.js
index bf6ad3e..c4a371c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -30,8 +30,12 @@ export default new Router({
             component: resolve => require(['../components/page/Upload.vue'], resolve)
         },
         {
-            path: '/vuecharts',
-            component: resolve => require(['../components/page/VueCharts.vue'], resolve)
+            path: '/basecharts',
+            component: resolve => require(['../components/page/BaseCharts.vue'], resolve)
+        },
+        {
+            path: '/mixcharts',
+            component: resolve => require(['../components/page/MixCharts.vue'], resolve)
         }
     ]
 })