107 lines
2.1 KiB
Vue
107 lines
2.1 KiB
Vue
<script lang="ts" setup>
|
|
import { computed } from 'vue';
|
|
import VueApexCharts from 'vue3-apexcharts';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
series: { data: number[] }[];
|
|
labels: string[];
|
|
}>(),
|
|
{
|
|
series: () => [
|
|
{
|
|
data: [1, 2, 3, 4],
|
|
},
|
|
],
|
|
labels: () => ['1', '2', '3', '4'],
|
|
},
|
|
);
|
|
|
|
const chartOptions = computed(() => ({
|
|
chart: {
|
|
type: 'bar',
|
|
fontFamily: 'Noto Sans Thai',
|
|
},
|
|
plotOptions: {
|
|
bar: {
|
|
barHeight: '100%',
|
|
distributed: true,
|
|
horizontal: true,
|
|
borderRadius: 6,
|
|
borderRadiusApplication: 'end',
|
|
dataLabels: {
|
|
position: 'bottom',
|
|
},
|
|
},
|
|
},
|
|
colors: ['#f59f00', '#035aa1', '#0ca678', '#c92a2a'],
|
|
dataLabels: {
|
|
enabled: false,
|
|
textAnchor: 'start',
|
|
style: {
|
|
colors: ['#fff'],
|
|
},
|
|
formatter: function (
|
|
val: string,
|
|
opt: {
|
|
w: { globals: { labels: { [x: string]: string } } };
|
|
dataPointIndex: string | number;
|
|
},
|
|
) {
|
|
return opt.w.globals.labels[opt.dataPointIndex] + ': ' + val;
|
|
},
|
|
offsetX: 0,
|
|
dropShadow: {
|
|
enabled: true,
|
|
},
|
|
},
|
|
stroke: {
|
|
width: 1,
|
|
colors: ['#fff'],
|
|
},
|
|
xaxis: {
|
|
categories: props.labels,
|
|
},
|
|
yaxis: {
|
|
labels: {
|
|
show: false,
|
|
},
|
|
},
|
|
legend: {
|
|
show: false,
|
|
},
|
|
tooltip: {
|
|
theme: 'dark',
|
|
x: {
|
|
show: false,
|
|
},
|
|
y: {
|
|
title: {
|
|
formatter: function (
|
|
val: string,
|
|
opt: {
|
|
w: { globals: { labels: { [x: string]: string } } };
|
|
dataPointIndex: string | number;
|
|
},
|
|
) {
|
|
return opt.w.globals.labels[opt.dataPointIndex] + ':';
|
|
},
|
|
},
|
|
},
|
|
},
|
|
}));
|
|
</script>
|
|
<template>
|
|
<div class="surface-1 rounded bordered q-pa-md">
|
|
{{ $t('dashboard.quotation.title') }}
|
|
<div class="text-caption app-text-muted">
|
|
{{ $t('dashboard.quotation.caption') }}
|
|
</div>
|
|
<VueApexCharts
|
|
type="bar"
|
|
height="200"
|
|
:options="chartOptions"
|
|
:series="series"
|
|
></VueApexCharts>
|
|
</div>
|
|
</template>
|