最近公司项目需要表格, 然后又是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>