<div class="app">
<h1 class="title">{{ message }}</h1>
<line-chart></line-chart>
</div>.title {
font-weight: bold;
font-size: 20px;
padding: 10px;
}
Vue.component('line-chart', {
extends: VueChartJs.Line,
mounted () {
this.renderChart({
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
datasets: [
{
label: '合計',
backgroundColor: '#f87979',
data: [40, 39, 10, 40, 39, 80, 40]
}
]
}, {responsive: true, maintainAspectRatio: false})
}
})
var vm = new Vue({
el: '.app',
data: {
message: '2020年来場者数'
}
})
