Add vue-charts component

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",

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>

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>

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)

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)
         }
     ]
 })