From beec461322685f97e497b218e6fb27c244635138 Mon Sep 17 00:00:00 2001
From: lin-xin <2981207131@qq.com>
Date: Mon, 20 Feb 2017 19:01:37 +0800
Subject: [PATCH] Add vue-charts component

---
 package.json                      |  2 ++
 src/components/common/sidebar.vue |  7 ++----
 src/components/page/VueCharts.vue | 40 +++++++++++++++++++++++++++++++
 src/main.js                       |  4 +++-
 src/router/index.js               |  4 ++++
 5 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 src/components/page/VueCharts.vue

diff --git a/package.json b/package.json
index ac5b619..56bc99b 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
   },
   "dependencies": {
     "axios": "^0.15.3",
+    "chart.js": "^2.5.0",
     "element-ui": "^1.1.6",
+    "hchs-vue-charts": "^1.2.7",
     "vue": "^2.1.10",
     "vue-core-image-upload": "^2.0.5",
     "vue-datasource": "^1.0.4",
diff --git a/src/components/common/sidebar.vue b/src/components/common/sidebar.vue
index 0b3048e..70bbea7 100644
--- a/src/components/common/sidebar.vue
+++ b/src/components/common/sidebar.vue
@@ -14,11 +14,8 @@
                 <el-menu-item index="upload">文件上传</el-menu-item>
             </el-submenu>
             <el-submenu index="3">
-                <template slot="title"><i class="el-icon-star-on"></i>UI元素</template>
-                <el-menu-item index="3-1">弹出框alert</el-menu-item>
-                <el-menu-item index="3-2">确认框confirm</el-menu-item>
-                <el-menu-item index="3-3">提示框</el-menu-item>
-                <el-menu-item index="3-4">树形图</el-menu-item>
+                <template slot="title"><i class="el-icon-star-on"></i>图表</template>
+                <el-menu-item index="vuecharts">VueCharts</el-menu-item>
             </el-submenu>
         </el-menu>
     </div>
diff --git a/src/components/page/VueCharts.vue b/src/components/page/VueCharts.vue
new file mode 100644
index 0000000..a39a10a
--- /dev/null
+++ b/src/components/page/VueCharts.vue
@@ -0,0 +1,40 @@
+<template>
+    <div>
+        <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>
+        </div>
+        <div class="plugins-tips">
+            vue-charts：基于vue2和chart.js的图表组件。
+            访问地址：<a href="https://github.com/hchstera/vue-charts" target="_blank">vue-charts</a>
+        </div>
+        <chartjs-line class="chart-box"
+                      :datalabel="mylabel" :labels="mylabels" :data="mydata"
+                      :linetension="0"></chartjs-line>
+        <chartjs-bar class="chart-box"
+                     :datalabel="mylabel" :labels="mylabels" :data="mydata"></chartjs-bar>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        data: function(){
+            return {
+                mylabel : '2013-2017年走势',
+                mylabels : ['2013','2014','2015', '2016', '2017'],
+                mydata : [15,30, 20, 80, 100]
+            }
+        }
+    }
+</script>
+
+<style>
+    .chart-box{
+        float: left;
+        width:500px;
+        margin: 20px 30px;
+    }
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index de98856..5f827cb 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,11 +1,13 @@
 import Vue from 'vue';
 import App from './App';
 import router from './router';
+require('chart.js/dist/Chart.bundle.min.js')
+require('hchs-vue-charts/dist/vue-charts.js')
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-default/index.css';
 
 Vue.use(ElementUI);
-
+Vue.use(VueCharts);
 new Vue({
     router,
     render: h => h(App)
diff --git a/src/router/index.js b/src/router/index.js
index 04157fb..bf6ad3e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -28,6 +28,10 @@ export default new Router({
         {
             path: '/upload',
             component: resolve => require(['../components/page/Upload.vue'], resolve)
+        },
+        {
+            path: '/vuecharts',
+            component: resolve => require(['../components/page/VueCharts.vue'], resolve)
         }
     ]
 })
-- 
GitLab