353 lines
7.9 KiB
Vue
353 lines
7.9 KiB
Vue
<script setup lang="ts">
|
|
import { VueUiXy, type VueUiXyConfig, type VueUiXyDatasetItem } from 'vue-data-ui';
|
|
import 'vue-data-ui/style.css'; // If you are using multiple components, place styles import in your main
|
|
|
|
const config = computed<VueUiXyConfig>(() => {
|
|
return {
|
|
theme: undefined,
|
|
responsive: false,
|
|
customPalette: [],
|
|
useCssAnimation: true,
|
|
downsample: {
|
|
threshold: 500,
|
|
},
|
|
chart: {
|
|
fontFamily: 'inherit',
|
|
backgroundColor: '#FFFFFFff',
|
|
color: '#1A1A1Aff',
|
|
height: 600,
|
|
width: 1000,
|
|
zoom: {
|
|
show: true,
|
|
color: '#CCCCCCff',
|
|
highlightColor: '#4A4A4A',
|
|
fontSize: 14,
|
|
useResetSlot: false,
|
|
startIndex: null,
|
|
endIndex: null,
|
|
enableRangeHandles: true,
|
|
enableSelectionDrag: true,
|
|
minimap: {
|
|
show: true,
|
|
smooth: false,
|
|
selectedColor: '#1F77B4',
|
|
selectedColorOpacity: 0.2,
|
|
lineColor: '#1A1A1A',
|
|
selectionRadius: 2,
|
|
indicatorColor: '#1A1A1A',
|
|
verticalHandles: false,
|
|
},
|
|
},
|
|
padding: {
|
|
top: 36,
|
|
right: 24,
|
|
bottom: 48,
|
|
left: 48,
|
|
},
|
|
highlighter: {
|
|
color: '#1A1A1Aff',
|
|
opacity: 5,
|
|
useLine: false,
|
|
lineDasharray: 2,
|
|
lineWidth: 1,
|
|
},
|
|
highlightArea: {
|
|
show: false,
|
|
from: 0,
|
|
to: 0,
|
|
color: '#CCCCCCff',
|
|
opacity: 20,
|
|
caption: {
|
|
text: 'Caption',
|
|
fontSize: 20,
|
|
color: '#1A1A1Aff',
|
|
bold: false,
|
|
offsetY: 0,
|
|
width: 'auto',
|
|
padding: 3,
|
|
textAlign: 'center',
|
|
},
|
|
},
|
|
timeTag: {
|
|
show: false,
|
|
backgroundColor: '#e1e5e8ff',
|
|
color: '#1A1A1Aff',
|
|
fontSize: 12,
|
|
circleMarker: {
|
|
radius: 3,
|
|
color: '#1A1A1Aff',
|
|
},
|
|
},
|
|
grid: {
|
|
stroke: '#e1e5e8ff',
|
|
showVerticalLines: false,
|
|
showHorizontalLines: false,
|
|
position: 'middle',
|
|
frame: {
|
|
show: false,
|
|
stroke: '#E1E5E8ff',
|
|
strokeWidth: 2,
|
|
strokeLinecap: 'round',
|
|
strokeLinejoin: 'round',
|
|
strokeDasharray: 0,
|
|
},
|
|
labels: {
|
|
show: true,
|
|
color: '#1A1A1Aff',
|
|
fontSize: 16,
|
|
axis: {
|
|
yLabel: '',
|
|
yLabelOffsetX: 0,
|
|
xLabel: '',
|
|
xLabelOffsetY: 14,
|
|
fontSize: 12,
|
|
},
|
|
zeroLine: {
|
|
show: true,
|
|
},
|
|
xAxis: {
|
|
showBaseline: true,
|
|
},
|
|
yAxis: {
|
|
showBaseline: true,
|
|
commonScaleSteps: 10,
|
|
useIndividualScale: false,
|
|
stacked: false,
|
|
gap: 12,
|
|
labelWidth: 40,
|
|
formatter: null,
|
|
scaleMin: null,
|
|
scaleMax: null,
|
|
groupColor: '#1A1A1A',
|
|
scaleLabelOffsetX: 0,
|
|
scaleValueOffsetX: 0,
|
|
},
|
|
xAxisLabels: {
|
|
color: '#1A1A1Aff',
|
|
show: true,
|
|
values: [],
|
|
fontSize: 18,
|
|
showOnlyFirstAndLast: false,
|
|
showOnlyAtModulo: false,
|
|
modulo: 12,
|
|
yOffset: 8,
|
|
rotation: 0,
|
|
},
|
|
},
|
|
},
|
|
comments: {
|
|
show: true,
|
|
showInTooltip: true,
|
|
width: 200,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
},
|
|
labels: {
|
|
fontSize: 16,
|
|
prefix: '',
|
|
suffix: '',
|
|
},
|
|
legend: {
|
|
color: '#1A1A1Aff',
|
|
show: true,
|
|
fontSize: 16,
|
|
},
|
|
title: {
|
|
text: 'Title',
|
|
color: '#1A1A1Aff',
|
|
fontSize: 20,
|
|
bold: true,
|
|
textAlign: 'center',
|
|
paddingLeft: 0,
|
|
paddingRight: 0,
|
|
subtitle: {
|
|
color: '#CCCCCCff',
|
|
text: '',
|
|
fontSize: 16,
|
|
bold: false,
|
|
},
|
|
show: true,
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
color: '#1A1A1Aff',
|
|
backgroundColor: '#FFFFFFff',
|
|
fontSize: 14,
|
|
customFormat: null,
|
|
borderRadius: 4,
|
|
borderColor: '#e1e5e8',
|
|
borderWidth: 1,
|
|
backgroundOpacity: 30,
|
|
position: 'center',
|
|
offsetY: 24,
|
|
showTimeLabel: true,
|
|
showValue: true,
|
|
showPercentage: false,
|
|
roundingValue: 0,
|
|
roundingPercentage: 0,
|
|
},
|
|
userOptions: {
|
|
show: true,
|
|
showOnChartHover: false,
|
|
keepStateOnChartLeave: true,
|
|
position: 'right',
|
|
buttons: {
|
|
tooltip: true,
|
|
pdf: true,
|
|
csv: true,
|
|
img: true,
|
|
table: true,
|
|
labels: true,
|
|
fullscreen: true,
|
|
sort: false,
|
|
stack: true,
|
|
animation: false,
|
|
annotator: true,
|
|
},
|
|
buttonTitles: {
|
|
open: 'Open options',
|
|
close: 'Close options',
|
|
tooltip: 'Toggle tooltip',
|
|
pdf: 'Download PDF',
|
|
csv: 'Download CSV',
|
|
img: 'Download PNG',
|
|
table: 'Toggle table',
|
|
labels: 'Toggle labels',
|
|
fullscreen: 'Toggle fullscreen',
|
|
stack: 'Toggle stack mode',
|
|
annotator: 'Toggle annotator',
|
|
},
|
|
print: {
|
|
allowTaint: false,
|
|
backgroundColor: '#FFFFFFff',
|
|
useCORS: false,
|
|
onclone: null,
|
|
scale: 2,
|
|
logging: false,
|
|
},
|
|
},
|
|
},
|
|
bar: {
|
|
borderRadius: 2,
|
|
useGradient: true,
|
|
periodGap: 0.1,
|
|
border: {
|
|
useSerieColor: false,
|
|
strokeWidth: 1,
|
|
stroke: '#FFFFFFff',
|
|
},
|
|
labels: {
|
|
show: true,
|
|
offsetY: -8,
|
|
rounding: 0,
|
|
color: '#1A1A1Aff',
|
|
formatter: null,
|
|
},
|
|
serieName: {
|
|
show: false,
|
|
offsetY: -6,
|
|
useAbbreviation: true,
|
|
abbreviationSize: 3,
|
|
useSerieColor: true,
|
|
color: '#1A1A1Aff',
|
|
bold: false,
|
|
},
|
|
},
|
|
line: {
|
|
radius: 6,
|
|
useGradient: false,
|
|
strokeWidth: 2,
|
|
cutNullValues: false,
|
|
dot: {
|
|
hideAboveMaxSerieLength: 62,
|
|
useSerieColor: false,
|
|
fill: '#FFFFFF',
|
|
strokeWidth: 2,
|
|
},
|
|
labels: {
|
|
show: true,
|
|
offsetY: -16,
|
|
rounding: 0,
|
|
color: '#1A1A1Aff',
|
|
formatter: null,
|
|
},
|
|
area: {
|
|
useGradient: true,
|
|
opacity: 20,
|
|
},
|
|
tag: {
|
|
followValue: true,
|
|
formatter: null,
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
plot: {
|
|
radius: 6,
|
|
useGradient: true,
|
|
dot: {
|
|
useSerieColor: true,
|
|
fill: '#FFFFFF',
|
|
strokeWidth: 0.5,
|
|
},
|
|
labels: {
|
|
show: true,
|
|
offsetY: -8,
|
|
rounding: 0,
|
|
color: '#1A1A1Aff',
|
|
formatter: null,
|
|
},
|
|
tag: {
|
|
followValue: true,
|
|
formatter: null,
|
|
fontSize: 14,
|
|
},
|
|
},
|
|
table: {
|
|
responsiveBreakpoint: 400,
|
|
rounding: 0,
|
|
sparkline: true,
|
|
showSum: true,
|
|
columnNames: {
|
|
period: 'Period',
|
|
total: 'Total',
|
|
},
|
|
th: {
|
|
backgroundColor: '#FAFAFAff',
|
|
color: '#1A1A1Aff',
|
|
outline: '',
|
|
},
|
|
td: {
|
|
backgroundColor: '#FAFAFAff',
|
|
color: '#1A1A1Aff',
|
|
outline: '',
|
|
},
|
|
},
|
|
showTable: false,
|
|
};
|
|
});
|
|
|
|
const dataset = computed<VueUiXyDatasetItem[]>(() => {
|
|
return [
|
|
{
|
|
name: 'Serie name',
|
|
series: [1, 9, 7, 2, 12, 16, 17, 30, 16, 23],
|
|
color: '#1f77b4',
|
|
type: 'line',
|
|
shape: 'circle',
|
|
useArea: false,
|
|
useProgression: false,
|
|
dataLabels: true,
|
|
smooth: true,
|
|
dashed: false,
|
|
useTag: 'none',
|
|
},
|
|
];
|
|
});
|
|
</script>
|
|
<template>
|
|
<!-- Using a wrapper is optional -->
|
|
<div :style="{ width: '600px' }">
|
|
<VueUiXy :config="config" :dataset="dataset" />
|
|
</div>
|
|
</template>
|