bf1942/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-12-25 22:30:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): add visactor plugin demos (#658)

Browse Source 
* feat: add vtable plugin

* feat: add vchart hook

* feat: add dark mode support in vtable

* feat: add visactor icon

* feat: add vtable-gantt plugin

* fix: fix theme update in vtable-gantt

* feat: update visactor version
This commit is contained in:
Rui-Sun
2024-11-02 01:57:43 +08:00
committed by GitHub
parent aabe7fe592
commit b9e873e53c
19 changed files with 10147 additions and 6340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/views/plugin/charts/vchart/index.vue Normal file
View File

@@ -0,0 +1,69 @@
<script setup lang="ts">
import { onUnmounted } from 'vue';
import type {
IAreaChartSpec,
IBarChartSpec,
ICircularProgressChartSpec,
IHistogramChartSpec,
ILiquidChartSpec
} from '@visactor/vchart';
import { useVChart } from '@/hooks/common/vchart';
import {
barMarkPointSpec,
circularProgressTickSpec,
histogramDifferentBinSpec,
liquidChartSmartInvertSpec,
rankingBarSpec,
shapeWordCloudSpec,
stackedDashAreaSpec
} from './data';
const { domRef: stackedDashAreaRef } = useVChart(() => stackedDashAreaSpec as IAreaChartSpec, { onRender() {} });
const { domRef: barMarkPointRef } = useVChart(() => barMarkPointSpec as IBarChartSpec, { onRender() {} });
const { domRef: histogramDifferentBinRef } = useVChart(() => histogramDifferentBinSpec as IHistogramChartSpec, {
onRender() {}
});
const { domRef: rankingBarRef } = useVChart(() => rankingBarSpec as IBarChartSpec, { onRender() {} });
const { domRef: shapeWordCloudRef } = useVChart(() => shapeWordCloudSpec, { onRender() {} });
const { domRef: circularProgressTickRef } = useVChart(() => circularProgressTickSpec as ICircularProgressChartSpec, {
onRender() {}
});
const { domRef: liquidChartSmartInvertRef } = useVChart(() => liquidChartSmartInvertSpec as ILiquidChartSpec, {
onRender() {}
});
onUnmounted(() => {
// clearGaugeChart();
});
</script>
<template>
<NSpace vertical :size="16">
<NCard title="Stacked Dash Area Chart" :bordered="false" class="h-full card-wrapper">
<div ref="stackedDashAreaRef" class="h-400px" />
</NCard>
<NCard title="Bar Mark Point Chart" :bordered="false" class="h-full card-wrapper">
<div ref="barMarkPointRef" class="h-400px" />
</NCard>
<NCard title="Histogram Different Bin Chart" :bordered="false" class="h-full card-wrapper">
<div ref="histogramDifferentBinRef" class="h-400px" />
</NCard>
<NCard title="Ranking Bar Chart" :bordered="false" class="h-full card-wrapper">
<div ref="rankingBarRef" class="h-400px" />
</NCard>
<NCard title="Circular Progress Tick Chart" :bordered="false" class="h-full card-wrapper">
<div ref="circularProgressTickRef" class="h-400px" />
</NCard>
<NCard title="Liquid Chart Smart Invert Chart" :bordered="false" class="h-full card-wrapper">
<div ref="liquidChartSmartInvertRef" class="h-400px" />
</NCard>
<NCard title="Shape Word Cloud Chart" :bordered="false" class="h-full card-wrapper">
<div ref="shapeWordCloudRef" class="h-400px" />
</NCard>
<NCard :bordered="false" class="h-full w-2/3 card-wrapper">
<WebSiteLink label="More VChart Demos: " link="https://www.visactor.com/vchart/example" />
</NCard>
</NSpace>
</template>
<style scoped></style>