From af7941929b2898dbb5c92e622ed4241aecb968e7 Mon Sep 17 00:00:00 2001
From: wangxg2016 <wang_xg@139.com>
Date: Tue, 18 Oct 2016 20:33:43 +0800
Subject: [PATCH] chart

---
 package.json                    |   7 +-
 src/components/page/navmenu.vue |   1 +
 src/demos/Charts.vue            | 269 ++++++++++++++++++++++++++++++++
 src/main.js                     |   5 +
 4 files changed, 279 insertions(+), 3 deletions(-)
 create mode 100644 src/demos/Charts.vue

diff --git a/package.json b/package.json
index 140abfb..3eefba0 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "vue": "^2.0.1",
+    "vue": "^2.0.3",
     "babel-runtime": "^6.11.6"
   },
   "devDependencies": {
@@ -23,6 +23,7 @@
     "babel-preset-stage-2": "^6.16.0",
     "bulma": "0.2.1",
     "chai": "^3.5.0",
+    "chart.js": "^2.3.0",
     "connect-history-api-fallback": "^1.3.0",
     "css-loader": "^0.25.0",
     "eslint": "^3.7.0",
@@ -65,9 +66,9 @@
     "url-loader": "^0.5.7",
     "vue-hot-reload-api": "^2.0.6",
     "vue-html-loader": "^1.2.3",
-    "vue-loader": "^9.5.1",
+    "vue-loader": "^9.7.0",
     "vue-resource": "^1.0.3",
-    "vue-router": "^2.0.0",
+    "vue-router": "^2.0.1",
     "vue-style-loader": "^1.0.0",
     "vuex": "^2.0.0",
     "webpack": "^1.13.2",
diff --git a/src/components/page/navmenu.vue b/src/components/page/navmenu.vue
index 504fd59..95cfc8c 100644
--- a/src/components/page/navmenu.vue
+++ b/src/components/page/navmenu.vue
@@ -97,6 +97,7 @@ export default {
               title: '功能组件',
               icon: 'puzzle-piece',
               sub: [
+                {title: 'Charts', url: '/charts'},
                 {title: 'Collapse', url: '/collapse'},
                 {title: 'Modal', url: '/modal'},
                 {title: 'Pagination', url: '/pagination'},
diff --git a/src/demos/Charts.vue b/src/demos/Charts.vue
new file mode 100644
index 0000000..98d50f1
--- /dev/null
+++ b/src/demos/Charts.vue
@@ -0,0 +1,269 @@
+<template>
+<xcontent :classname="'bg-light'">
+  <span slot="title">Charts</span>
+  <div class="notification is-white">
+    引入Chart.js 2.3.0，这部分没什么说的，实际应用中ajax数据处理为主，vue+chart很搭。
+  </div>
+  <div class="columns is-multiline">
+    <div class="column is-4">
+      <div class="box">
+        <canvas ref="cv0" width="400" height="300"></canvas>
+      </div>
+    </div>
+    <div class="column is-4">
+      <div class="box">
+        <canvas ref="cv1" width="400" height="300"></canvas>
+      </div>
+    </div>
+    <div class="column is-4">
+      <div class="box">
+        <canvas ref="cv2" width="400" height="300"></canvas>
+      </div>
+    </div>
+    <div class="column is-4">
+      <div class="box">
+        <canvas ref="cv3" width="400" height="300"></canvas>
+      </div>
+    </div>
+    <div class="column is-4">
+      <div class="box">
+        <canvas ref="cv4" width="400" height="300"></canvas>
+      </div>
+    </div>
+    <div class="column is-4">
+      <div class="box">
+        <canvas ref="cv5" width="400" height="300"></canvas>
+      </div>
+    </div>
+    <div class="column is-4">
+      <div class="box">
+        <canvas ref="cv6" width="400" height="300"></canvas>
+      </div>
+    </div>
+  </div>
+</xcontent>
+</template>
+<script>
+import Chart from 'chart.js'
+import { Xcontent } from '../components/page'
+export default {
+  components: {
+    Xcontent
+  },
+  data () {
+    return {
+      chart1: null,
+      chart2: null,
+      chart3: null,
+      data1: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [
+          {
+            label: '折线图',
+            fill: false,
+            lineTension: 0.1,
+            backgroundColor: 'rgba(75,192,192,0.4)',
+            borderColor: 'rgba(75,192,192,1)',
+            borderCapStyle: 'butt',
+            borderDash: [],
+            borderDashOffset: 0.0,
+            borderJoinStyle: 'miter',
+            pointBorderColor: 'rgba(75,192,192,1)',
+            pointBackgroundColor: '#fff',
+            pointBorderWidth: 1,
+            pointHoverRadius: 5,
+            pointHoverBackgroundColor: 'rgba(75,192,192,1)',
+            pointHoverBorderColor: 'rgba(220,220,220,1)',
+            pointHoverBorderWidth: 2,
+            pointRadius: 1,
+            pointHitRadius: 10,
+            data: [65, 59, 80, 81, 56, 55, 40],
+            spanGaps: false
+          }
+        ]
+      },
+      data2: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [
+          {
+            label: '柱状图',
+            backgroundColor: [
+              'rgba(255, 99, 132, 0.2)',
+              'rgba(54, 162, 235, 0.2)',
+              'rgba(255, 206, 86, 0.2)',
+              'rgba(75, 192, 192, 0.2)',
+              'rgba(153, 102, 255, 0.2)',
+              'rgba(255, 159, 64, 0.2)'
+            ],
+            borderColor: [
+              'rgba(255,99,132,1)',
+              'rgba(54, 162, 235, 1)',
+              'rgba(255, 206, 86, 1)',
+              'rgba(75, 192, 192, 1)',
+              'rgba(153, 102, 255, 1)',
+              'rgba(255, 159, 64, 1)'
+            ],
+            borderWidth: 1,
+            data: [65, 59, 80, 81, 56, 55, 40]
+          }
+        ]
+      },
+      data3: {
+        labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+        datasets: [
+          {
+            label: '雷达图',
+            backgroundColor: 'rgba(179,181,198,0.2)',
+            borderColor: 'rgba(179,181,198,1)',
+            pointBackgroundColor: 'rgba(179,181,198,1)',
+            pointBorderColor: '#fff',
+            pointHoverBackgroundColor: '#fff',
+            pointHoverBorderColor: 'rgba(179,181,198,1)',
+            data: [65, 59, 90, 81, 56, 55, 40]
+          },
+          {
+            label: 'My Second dataset',
+            backgroundColor: 'rgba(255,99,132,0.2)',
+            borderColor: 'rgba(255,99,132,1)',
+            pointBackgroundColor: 'rgba(255,99,132,1)',
+            pointBorderColor: '#fff',
+            pointHoverBackgroundColor: '#fff',
+            pointHoverBorderColor: 'rgba(255,99,132,1)',
+            data: [28, 48, 40, 19, 96, 27, 100]
+          }
+        ]
+      },
+      data4: {
+        datasets: [{
+          data: [11, 16, 7, 3, 14],
+          backgroundColor: ['#FF6384', '#4BC0C0', '#FFCE56', '#E7E9ED', '#36A2EB'],
+          label: '区域图'
+        }],
+        labels: ['Red', 'Green', 'Yellow', 'Grey', 'Blue']
+      },
+      data5: {
+        labels: ['Red', 'Blue', 'Yellow'],
+        datasets: [
+          {
+            data: [300, 50, 100],
+            backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'],
+            hoverBackgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
+          }
+        ]
+      },
+      data6: {
+        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+        datasets: [
+          {
+            label: '指标一',
+            fill: true,
+            lineTension: 0.1,
+            backgroundColor: 'rgba(75,192,192,0.4)',
+            borderColor: 'rgba(75,192,192,1)',
+            borderCapStyle: 'butt',
+            borderDash: [],
+            borderDashOffset: 0.0,
+            borderJoinStyle: 'miter',
+            pointBorderColor: 'rgba(75,192,192,1)',
+            pointBackgroundColor: '#fff',
+            pointBorderWidth: 1,
+            pointHoverRadius: 5,
+            pointHoverBackgroundColor: 'rgba(75,192,192,1)',
+            pointHoverBorderColor: 'rgba(220,220,220,1)',
+            pointHoverBorderWidth: 2,
+            pointRadius: 1,
+            pointHitRadius: 10,
+            data: [65, 59, 80, 81, 56, 55, 40],
+            spanGaps: false
+          },
+          {
+            label: '指标二',
+            fill: true,
+            lineTension: 0.1,
+            backgroundColor: 'rgba(54, 162, 235, 0.4)',
+            borderColor: 'rgba(54, 162, 235, 1)',
+            borderCapStyle: 'butt',
+            borderDash: [],
+            borderDashOffset: 0.0,
+            borderJoinStyle: 'miter',
+            pointBorderColor: 'rgba(54, 162, 235, 1)',
+            pointBackgroundColor: '#fff',
+            pointBorderWidth: 1,
+            pointHoverRadius: 5,
+            pointHoverBackgroundColor: 'rgba(54, 162, 235, 1)',
+            pointHoverBorderColor: 'rgba(54, 162, 235, 1)',
+            pointHoverBorderWidth: 2,
+            pointRadius: 1,
+            pointHitRadius: 10,
+            data: [28, 48, 40, 19, 86, 27, 90],
+            spanGaps: false
+          }
+        ]
+      },
+      areaOptions: {
+        // Boolean - If we should show the scale at all
+        showScale: true,
+        // Boolean - Whether grid lines are shown across the chart
+        scaleShowGridLines: false,
+        // String - Colour of the grid lines
+        scaleGridLineColor: 'rgba(0,0,0,.05)',
+        // Number - Width of the grid lines
+        scaleGridLineWidth: 1,
+        // Boolean - Whether to show horizontal lines (except X axis)
+        scaleShowHorizontalLines: true,
+        // Boolean - Whether to show vertical lines (except Y axis)
+        scaleShowVerticalLines: true,
+        // Boolean - Whether the line is curved between points
+        bezierCurve: true,
+        // Number - Tension of the bezier curve between points
+        bezierCurveTension: 0.3,
+        // Boolean - Whether to show a dot for each point
+        pointDot: false,
+        // Number - Radius of each point dot in pixels
+        pointDotRadius: 4,
+        // Number - Pixel width of point dot stroke
+        pointDotStrokeWidth: 1,
+        // Number - amount extra to add to the radius to cater for hit detection outside the drawn point
+        pointHitDetectionRadius: 20,
+        // Boolean - Whether to show a stroke for datasets
+        datasetStroke: true,
+        // Number - Pixel width of dataset stroke
+        datasetStrokeWidth: 2,
+        // Boolean - Whether to fill the dataset with a color
+        datasetFill: true,
+        // String - A legend template
+        legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].lineColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>',
+        // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
+        maintainAspectRatio: true,
+        // Boolean - whether to make the chart responsive to window resizing
+        responsive: true
+      }
+    }
+  },
+  methods: {
+    draw (type, json, dom, options) {
+      if (options) {
+        this.chart1 = new Chart(dom.getContext('2d'), {
+          type: type,
+          options: options,
+          data: json
+        })
+      } else {
+        this.chart1 = new Chart(dom.getContext('2d'), {
+          type: type,
+          data: json
+        })
+      }
+    }
+  },
+  mounted () {
+    this.draw('line', this.data6, this.$refs.cv0)
+    this.draw('line', this.data1, this.$refs.cv1)
+    this.draw('bar', this.data2, this.$refs.cv2)
+    this.draw('radar', this.data3, this.$refs.cv3)
+    this.draw('polarArea', this.data4, this.$refs.cv4)
+    this.draw('pie', this.data5, this.$refs.cv5)
+    this.draw('doughnut', this.data5, this.$refs.cv6)
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 346a808..1d563e0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -16,6 +16,7 @@ import Pagination from './demos/Pagination'
 import Progress from './demos/Progress'
 import Notfound from './demos/404'
 import Timeline from './demos/Timeline'
+import Charts from './demos/Charts'
 
 // UI
 import Icons from './demos/Icons'
@@ -199,6 +200,10 @@ const routes = [
     path: '/title',
     component: Title
   },
+  {
+    path: '/charts',
+    component: Charts
+  },
   {
     path: '/tags',
     component: Tags