examples/vue-ts-example
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

feat: add vue-data-ui dependency and create vue-data-ui page
All checks were successful
/ build-and-deploy-to-vercel (push) Successful in 3m58s
Details
/ surge (push) Successful in 3m8s
Details
/ playwright (push) Successful in 1m42s
Details
/ cleanup_surge (push) Successful in 11s
Details
/ lint-build-and-check (push) Successful in 6m3s
Details

Browse Source
This commit is contained in:
严浩
2025-05-26 12:57:24 +08:00
parent c3690aa235
commit e8803a9f18
4 changed files with 366 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -88,6 +88,7 @@
"utils4u": "^4.2.3", "utils4u": "^4.2.3",
"vant": "^4.9.19", "vant": "^4.9.19",
"vue": "^3.5.14", "vue": "^3.5.14",
"vue-data-ui": "^2.7.5",
"vue-draggable-plus": "^0.6.0", "vue-draggable-plus": "^0.6.0",
"vue-i18n": "^11.1.4", "vue-i18n": "^11.1.4",
"vue-page-stack": "^3.2.0", "vue-page-stack": "^3.2.0",

12
pnpm-lock.yaml generated
View File

@ -145,6 +145,9 @@ importers:
vue: vue:
specifier: ^3.5.14 specifier: ^3.5.14
version: 3.5.14(typescript@5.8.3) version: 3.5.14(typescript@5.8.3)
vue-data-ui:
specifier: ^2.7.5
version: 2.7.5(vue@3.5.14(typescript@5.8.3))
vue-draggable-plus: vue-draggable-plus:
specifier: ^0.6.0 specifier: ^0.6.0
version: 0.6.0(@types/sortablejs@1.15.8) version: 0.6.0(@types/sortablejs@1.15.8)
@ -5582,6 +5585,11 @@ packages:
vue-component-type-helpers@2.2.10: vue-component-type-helpers@2.2.10:
resolution: {integrity: sha512-iDUO7uQK+Sab2tYuiP9D1oLujCWlhHELHMgV/cB13cuGbG4qwkLHvtfWb6FzvxrIOPDnU0oHsz2MlQjhYDeaHA==} resolution: {integrity: sha512-iDUO7uQK+Sab2tYuiP9D1oLujCWlhHELHMgV/cB13cuGbG4qwkLHvtfWb6FzvxrIOPDnU0oHsz2MlQjhYDeaHA==}
vue-data-ui@2.7.5:
resolution: {integrity: sha512-J0WyRMUQwg3YUyMUvc9jLWkgXM/c/ctoA3OZ7oPp5VDxUvG8/TSzTpLpCkCIWs+Rb7AiA9NGQRS8xyl84CPgwA==}
peerDependencies:
vue: '>=3.3.0'
vue-demi@0.14.10: vue-demi@0.14.10:
resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==} resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
engines: {node: '>=12'} engines: {node: '>=12'}
@ -11399,6 +11407,10 @@ snapshots:
vue-component-type-helpers@2.2.10: {} vue-component-type-helpers@2.2.10: {}
vue-data-ui@2.7.5(vue@3.5.14(typescript@5.8.3)):
dependencies:
vue: 3.5.14(typescript@5.8.3)
vue-demi@0.14.10(vue@3.5.14(typescript@5.8.3)): vue-demi@0.14.10(vue@3.5.14(typescript@5.8.3)):
dependencies: dependencies:
vue: 3.5.14(typescript@5.8.3) vue: 3.5.14(typescript@5.8.3)

352
src/pages/Page/vue-data-ui.page.vue Normal file
View File

@ -0,0 +1,352 @@
<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>

1
typed-router.d.ts vendored
View File

@ -39,6 +39,7 @@ declare module 'vue-router/auto-routes' {
'PagePinPuYi': RouteRecordInfo<'PagePinPuYi', '/Page/PinPuYi', Record<never, never>, Record<never, never>>, 'PagePinPuYi': RouteRecordInfo<'PagePinPuYi', '/Page/PinPuYi', Record<never, never>, Record<never, never>>,
'PageStyle': RouteRecordInfo<'PageStyle', '/Page/Style', Record<never, never>, Record<never, never>>, 'PageStyle': RouteRecordInfo<'PageStyle', '/Page/Style', Record<never, never>, Record<never, never>>,
'PageViteAssets': RouteRecordInfo<'PageViteAssets', '/Page/vite-assets', Record<never, never>, Record<never, never>>, 'PageViteAssets': RouteRecordInfo<'PageViteAssets', '/Page/vite-assets', Record<never, never>, Record<never, never>>,
'PageVueDataUi': RouteRecordInfo<'PageVueDataUi', '/Page/vue-data-ui', Record<never, never>, Record<never, never>>,
'PkgsUsageI18n': RouteRecordInfo<'PkgsUsageI18n', '/PkgsUsage/I18n', Record<never, never>, Record<never, never>>, 'PkgsUsageI18n': RouteRecordInfo<'PkgsUsageI18n', '/PkgsUsage/I18n', Record<never, never>, Record<never, never>>,
'PkgsUsageTsEnumUtil': RouteRecordInfo<'PkgsUsageTsEnumUtil', '/PkgsUsage/ts-enum-util', Record<never, never>, Record<never, never>>, 'PkgsUsageTsEnumUtil': RouteRecordInfo<'PkgsUsageTsEnumUtil', '/PkgsUsage/ts-enum-util', Record<never, never>, Record<never, never>>,
'UIComponentsAntdV': RouteRecordInfo<'UIComponentsAntdV', '/UI-components/AntdV', Record<never, never>, Record<never, never>>, 'UIComponentsAntdV': RouteRecordInfo<'UIComponentsAntdV', '/UI-components/AntdV', Record<never, never>, Record<never, never>>,