62 lines
1.3 KiB
Vue
62 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>
|