效果图:
安装:
cnpm install --save chart.js
使用:
首先,在<template></template>中写入:
<div class="chart-container" style="position: relative;width: 550px;height: 335px;margin: auto">
<canvas id="lineChart" width="550" height="335"></canvas>
</div>
其次,在<script></script>中写入:
<script>
import Chart from 'chart.js'
export default {
name: 'chart',
mounted () {
let that = this
// chart.js
const ctx = document.getElementById('lineChart').getContext('2d')
const lineChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan.', 'Feb.', 'Mar.', 'Apr.', 'May', 'Jun.', 'Jul.', 'Aug.'],
datasets: [{
label: 'London',
fill: false,
data: [18.9, 28.8, 39.3, 81.4, 47, 20.3, 24, 35.6],
backgroundColor: 'rgba(58, 161, 255, 0.2)',
borderColor: 'rgba(58, 161, 255,1)',
borderWidth: 1
}, {
label: 'Berlin',
fill: false,
data: [12.4, 23.2, 34.5, 99.7, 52.6, 35.5, 37.4, 42.4],
backgroundColor: 'rgba(78, 203, 115, 0.2)',
borderColor: 'rgba(78, 203, 115, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
// 布局,个人不建议使用
// layout: {
// padding: {
// left: 100,
// right: 150,
// top: 0,
// bottom: 400
// }
// },
// 标题
title: {
display: false,
text: ['降雨量统计', '(伦敦和柏林)'], // 标题及子标题
fontColor: ['#000000'],
fontSize: 15
},
// 图例
legend: {
position: 'bottom',
labels: {
fontSize: 10,
boxWidth: 9
}
},
tooltips: {
mode: 'index',
intersect: false
},
hover: {
mode: 'nearest',
intersect: true
},
// 坐标
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: '月份'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: '月均降雨量'
},
ticks: {
beginAtZero: true,
min: 0,
max: 100,
stepSize: 20
}
}]
},
onClick (MouseEvent, chartInfo) {
console.log(MouseEvent)
console.log(chartInfo)
console.log(chartInfo[0]._index)
console.log(chartInfo[0]._datasetIndex)
that.indexDate = chartInfo[0]._index
that.datasetIndex = chartInfo[0]._datasetIndex
console.log(that.indexDate)
console.log(that.datasetIndex)
that.clickPoint()
}
}
})
},
methods: {
clickPoint () {
this.$router.push({
name: 'ChartInfo',
params: {
indexDate: this.indexDate,
datasetIndex: this.datasetIndex
}
})
}
}
}
</script>
END