hafifierahman
166 lines
3.6 KiB
Vue
166 lines
3.6 KiB
Vue
<template>
|
|
|
|
<div class="mx-auto rounded-lg">
|
|
<apexchart
|
|
width="550" type="bar"
|
|
:options="chartOptions" :series="this.pemb">
|
|
</apexchart>
|
|
</div>
|
|
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
const formatter = new Intl.NumberFormat('en-US', {
|
|
minimumFractionDigits: 2
|
|
});
|
|
|
|
export default {
|
|
name: 'Chart',
|
|
props:{
|
|
kodcaw: String,
|
|
pemb: Array
|
|
},
|
|
data: () => ({
|
|
|
|
series: [
|
|
{
|
|
name: 'Actual',
|
|
data: [
|
|
{
|
|
x: 'Jan',
|
|
y: 1292,
|
|
// goals:[{name:'Expected',value:1700}]
|
|
goals: [
|
|
{
|
|
name: 'Expected',
|
|
value: 1400,
|
|
strokeHeight: 5,
|
|
strokeColor: '#e74c3c'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
x: 'Feb',
|
|
y: 4432,
|
|
// goals: [
|
|
// {
|
|
// name: 'Expected',
|
|
// value: 5400,
|
|
// strokeHeight: 5,
|
|
// strokeColor: '#e74c3c'
|
|
// }
|
|
// ]
|
|
},
|
|
{
|
|
x: 'Mar',
|
|
y: 5423,
|
|
// goals: [
|
|
// {
|
|
// name: 'Expected',
|
|
// value: 5200,
|
|
// strokeHeight: 5,
|
|
// strokeColor: '#e74c3c'
|
|
// }
|
|
// ]
|
|
},
|
|
{
|
|
x: 'Apr',
|
|
y: 6653,
|
|
// goals: [
|
|
// {
|
|
// name: 'Expected',
|
|
// value: 6500,
|
|
// strokeHeight: 5,
|
|
// strokeColor: '#e74c3c'
|
|
// }
|
|
// ]
|
|
},
|
|
{
|
|
x: 'May',
|
|
y: 8133,
|
|
// goals: [
|
|
// {
|
|
// name: 'Expected',
|
|
// value: 6600,
|
|
// strokeHeight: 13,
|
|
// strokeWidth: 0,
|
|
// strokeLineCap: 'round',
|
|
// strokeColor: '#e74c3c'
|
|
// }
|
|
// ]
|
|
},
|
|
{
|
|
x: 'Jun',
|
|
y: 7132,
|
|
// goals: [
|
|
// {
|
|
// name: 'Expected',
|
|
// value: 7500,
|
|
// strokeHeight: 5,
|
|
// strokeColor: '#e74c3c'
|
|
// }
|
|
// ]
|
|
},
|
|
{
|
|
x: 'Jul',
|
|
y: 7332,
|
|
// goals: [
|
|
// {
|
|
// name: 'Expected',
|
|
// value: 8700,
|
|
// strokeHeight: 5,
|
|
// strokeColor: '#e74c3c'
|
|
// }
|
|
// ]
|
|
},
|
|
{
|
|
x: 'Ogos',
|
|
y: 6553,
|
|
// goals: [
|
|
// {
|
|
// name: 'Expected',
|
|
// value: 7300,
|
|
// strokeHeight: 2,
|
|
// strokeDashArray: 2,
|
|
// strokeColor: '#e74c3c'
|
|
// }
|
|
// ]
|
|
}
|
|
]
|
|
}
|
|
],
|
|
chartOptions: {
|
|
chart: {
|
|
height: 350,
|
|
type: 'bar'
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
formatter: function (value) {
|
|
return 'RM ' + formatter.format(value);
|
|
}
|
|
},
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
columnWidth: '60%'
|
|
}
|
|
},
|
|
colors: ['#3498db'],
|
|
dataLabels: {
|
|
enabled: false
|
|
},
|
|
legend: {
|
|
show: true,
|
|
showForSingleSeries: true,
|
|
customLegendItems: ['Actual', 'Expected'],
|
|
markers: {
|
|
fillColors: ['#3498db', '#e74c3c']
|
|
}
|
|
}
|
|
},
|
|
})
|
|
}
|
|
</script> |