vue-chartjs案例

最近公司項目需要表格， 然後又是vue-cli搭建的架構，于是就找到了vue-chartjs這個元件， 下面展示一個案例。

這是效果

這裡放公共圖示元件VueLineChart.vue

<script>
// CommitChart.js
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  props:['data'],
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart(this.data )
  }
}
</script>
           

這裡是調用它的父元件

<template>
  <div>
    <div style="width: 500px; height: 500px;">
      <Bar :data="datacollection"></Bar>
    </div>
  </div>
</template>

<script>
import Bar from "../components/chart/VueLineChart";
export default {
  data() {
    return {
      datacollection: {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
        ],
        datasets: [
          {
            label: "GitHub Commits",
            backgroundColor: "rgba(0,193,222,.6)",
            hoverBackgroundColor: "rgba(0,193,222,.8)",
            data: [-4, 40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
          }
        ]
      } //endData
    };
  },
  mounted() {},
  methods: {},
  components: {
    Bar
  }
};
</script>

<style lang="scss" scoped>
</style>