bf1942/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-12-26 06:40:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

optimize(projects): optimize example code about vtable,vchart

Browse Source
This commit is contained in:
Soybean
2024-11-02 02:48:22 +08:00
parent b9e873e53c
commit d1c6081c25
6 changed files with 6656 additions and 5289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/views/plugin/charts/vchart/index.vue
View File

@@ -1,12 +1,4 @@
<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,
@@ -18,27 +10,20 @@ import {
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();
});
const { domRef: stackedDashAreaRef } = useVChart(() => stackedDashAreaSpec);
const { domRef: barMarkPointRef } = useVChart(() => barMarkPointSpec);
const { domRef: histogramDifferentBinRef } = useVChart(() => histogramDifferentBinSpec);
const { domRef: rankingBarRef } = useVChart(() => rankingBarSpec);
const { domRef: shapeWordCloudRef } = useVChart(() => shapeWordCloudSpec);
const { domRef: circularProgressTickRef } = useVChart(() => circularProgressTickSpec);
const { domRef: liquidChartSmartInvertRef } = useVChart(() => liquidChartSmartInvertSpec);
</script>
<template>
<NSpace vertical :size="16">
<NCard :bordered="false" title="VChart" class="h-full card-wrapper">
<WebSiteLink label="More Demos: " link="https://www.visactor.com/vchart/example" />
</NCard>
<NCard title="Stacked Dash Area Chart" :bordered="false" class="h-full card-wrapper">
<div ref="stackedDashAreaRef" class="h-400px" />
</NCard>
@@ -60,9 +45,6 @@ onUnmounted(() => {
<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>