woothu
96 lines
2.1 KiB
Vue
96 lines
2.1 KiB
Vue
<script>
|
|
import { Line } from 'vue-chartjs'
|
|
import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips'
|
|
import { getStyle } from '@coreui/coreui/dist/js/coreui-utilities'
|
|
const defaultBorderColor = 'rgba(255,255,255,.55)'
|
|
|
|
export default {
|
|
extends: Line,
|
|
props: {
|
|
data: {
|
|
type: Array,
|
|
default: () => [0, 22, 34, 46, 58, 70, 46, 23, 45, 78, 34, 12]
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: 40
|
|
},
|
|
label:{
|
|
type: String,
|
|
default: 'label|string'
|
|
},
|
|
labels:{
|
|
type: Array,
|
|
default () {
|
|
return(['January', 'February', 'March', 'April', 'May', 'June', 'July','August','September','October','November','December'])
|
|
}
|
|
},
|
|
borderColor:{
|
|
type: String,
|
|
default: defaultBorderColor
|
|
},
|
|
backgroundColor:{
|
|
type: String,
|
|
default: 'transparent'
|
|
},
|
|
pointHoverBackgroundColor: String,
|
|
},
|
|
computed:{
|
|
hoverBackgroundColor () {
|
|
if(this.pointHoverBackgroundColor !== undefined)
|
|
return this.pointHoverBackgroundColor
|
|
if(this.borderColor !== defaultBorderColor)
|
|
return this.borderColor
|
|
return 'transparent'
|
|
}
|
|
},
|
|
mounted () {
|
|
const datasets1 = [
|
|
{
|
|
label: this.label,
|
|
borderColor: this.borderColor,
|
|
backgroundColor: this.backgroundColor,
|
|
pointHoverBackgroundColor: this.hoverBackgroundColor,
|
|
data: this.data
|
|
}
|
|
]
|
|
|
|
this.renderChart(
|
|
{
|
|
labels: this.labels,
|
|
datasets: datasets1
|
|
},
|
|
{
|
|
tooltips: {
|
|
enabled: false,
|
|
custom: CustomTooltips
|
|
},
|
|
// responsive: true,
|
|
maintainAspectRatio: false,
|
|
legend: {
|
|
display: false
|
|
},
|
|
scales: {
|
|
xAxes: [{
|
|
display: false
|
|
}],
|
|
yAxes: [{
|
|
display: false
|
|
}]
|
|
},
|
|
elements: {
|
|
line: {
|
|
borderWidth: 2
|
|
},
|
|
point: {
|
|
radius: 0,
|
|
hitRadius: 10,
|
|
hoverRadius: 4
|
|
}
|
|
}
|
|
}
|
|
)
|
|
}
|
|
}
|
|
</script>
|