Complete vue-charts

.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

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

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>

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>
 

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>

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';

src/router/index.js

@@ -30,8 +30,12 @@ export default new Router({
             component: resolve => require(['../components/page/Upload.vue'], resolve)
         },
         {
-            path: '/vuecharts',
+            path: '/basecharts',
-            component: resolve => require(['../components/page/VueCharts.vue'], resolve)
+            component: resolve => require(['../components/page/BaseCharts.vue'], resolve)
+        },
+        {
+            path: '/mixcharts',
+            component: resolve => require(['../components/page/MixCharts.vue'], resolve)
         }
     ]
 })