61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<script setup>
|
|
const { $shortenCurrency } = useNuxtApp();
|
|
const revenueChartOptions = {
|
|
chart: {
|
|
type: 'spline'
|
|
},
|
|
credits: {
|
|
enabled: false,
|
|
},
|
|
title: {
|
|
text: null,
|
|
},
|
|
xAxis: {
|
|
categories: [
|
|
'10/4', '11/4', '12/4', '13/4', '14/4', '15/4', '16/4', '17/4', '18/4'
|
|
],
|
|
accessibility: {
|
|
description: 'Dates'
|
|
}
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: 'Doanh thu'
|
|
},
|
|
labels: {
|
|
format: '{value}'
|
|
}
|
|
},
|
|
tooltip: {
|
|
crosshairs: true,
|
|
shared: true,
|
|
valueSuffix: ' VNĐ',
|
|
},
|
|
plotOptions: {
|
|
spline: {
|
|
marker: {
|
|
enabled: false
|
|
}
|
|
}
|
|
},
|
|
series: [{
|
|
name: 'Doanh thu',
|
|
data: [45000000, 52000000, 48000000, 51000000, 58000000, 61000000, 67500000, 72000000, 69000000],
|
|
showInLegend: false,
|
|
}]
|
|
};
|
|
</script>
|
|
<template>
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<div class="is-flex is-justify-content-space-between mb-2">
|
|
<p style="font-weight: 600; font-size: 18px">Doanh thu theo ngày</p>
|
|
<div class="buttons">
|
|
<button class="button is-primary fs-14">7 ngày</button>
|
|
<button class="button is-white fs-14">30 ngày</button>
|
|
</div>
|
|
</div>
|
|
<highcharts :options="revenueChartOptions" />
|
|
</div>
|
|
</div>
|
|
</template> |