mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-08-26 16:46:19 +08:00
feat(chart): add useEcharts and useApexChart demo
This commit is contained in:
37
src/hooks/web/useApexCharts.ts
Normal file
37
src/hooks/web/useApexCharts.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import { useTimeout } from '/@/hooks/core/useTimeout';
|
||||
import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
|
||||
import { ref, unref, Ref, nextTick } from 'vue';
|
||||
|
||||
import ApexCharts from 'apexcharts';
|
||||
|
||||
export function useApexCharts(elRef: Ref<HTMLDivElement>) {
|
||||
const chartInstanceRef = ref<Nullable<ApexCharts>>(null);
|
||||
|
||||
function setOptions(options: any) {
|
||||
const el = unref(elRef);
|
||||
|
||||
if (!el || !unref(el)) {
|
||||
return;
|
||||
}
|
||||
chartInstanceRef.value = new ApexCharts(el, options);
|
||||
|
||||
const chartInstance = unref(chartInstanceRef);
|
||||
|
||||
nextTick(() => {
|
||||
useTimeout(() => {
|
||||
chartInstance && chartInstance.render();
|
||||
}, 30);
|
||||
});
|
||||
}
|
||||
|
||||
tryOnUnmounted(() => {
|
||||
const chartInstance = unref(chartInstanceRef);
|
||||
if (!chartInstance) {
|
||||
return;
|
||||
}
|
||||
chartInstanceRef.value = null;
|
||||
});
|
||||
return {
|
||||
setOptions,
|
||||
};
|
||||
}
|
79
src/hooks/web/useECharts.ts
Normal file
79
src/hooks/web/useECharts.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
import { useTimeout } from '/@/hooks/core/useTimeout';
|
||||
import { tryOnUnmounted } from '/@/utils/helper/vueHelper';
|
||||
import { ref, unref, Ref, nextTick } from 'vue';
|
||||
import type { EChartOption, ECharts } from 'echarts';
|
||||
import echarts from 'echarts';
|
||||
import { useDebounce } from '/@/hooks/core/useDebounce';
|
||||
import { useEvent } from '/@/hooks/event/useEvent';
|
||||
import { useBreakpoint } from '/@/hooks/event/useBreakpoint';
|
||||
|
||||
export type { EChartOption, ECharts };
|
||||
export function useECharts(
|
||||
elRef: Ref<HTMLDivElement>,
|
||||
theme: 'light' | 'dark' | 'default' = 'light'
|
||||
) {
|
||||
const chartInstanceRef = ref<Nullable<ECharts>>(null);
|
||||
let resizeFn: Fn = resize;
|
||||
|
||||
const [debounceResize] = useDebounce(resize, 200);
|
||||
resizeFn = debounceResize;
|
||||
|
||||
function init() {
|
||||
const el = unref(elRef);
|
||||
|
||||
if (!el || !unref(el)) {
|
||||
return;
|
||||
}
|
||||
chartInstanceRef.value = echarts.init(el, theme);
|
||||
useEvent({
|
||||
el: window,
|
||||
name: 'resize',
|
||||
listener: resizeFn,
|
||||
});
|
||||
const { widthRef, screenEnum } = useBreakpoint();
|
||||
if (unref(widthRef) <= screenEnum.MD) {
|
||||
useTimeout(() => {
|
||||
resizeFn();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
|
||||
function setOptions(options: any, clear = true) {
|
||||
// function setOptions(options: EChartOption, clear = true) {
|
||||
let chartInstance = unref(chartInstanceRef);
|
||||
|
||||
if (!chartInstance) {
|
||||
init();
|
||||
chartInstance = chartInstance = unref(chartInstanceRef);
|
||||
if (!chartInstance) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
clear && chartInstance.clear();
|
||||
nextTick(() => {
|
||||
useTimeout(() => {
|
||||
chartInstance && chartInstance.setOption(options);
|
||||
}, 30);
|
||||
});
|
||||
}
|
||||
|
||||
function resize() {
|
||||
const chartInstance = unref(chartInstanceRef);
|
||||
if (!chartInstance) {
|
||||
return;
|
||||
}
|
||||
chartInstance.resize();
|
||||
}
|
||||
tryOnUnmounted(() => {
|
||||
const chartInstance = unref(chartInstanceRef);
|
||||
if (!chartInstance) {
|
||||
return;
|
||||
}
|
||||
chartInstance.dispose();
|
||||
chartInstanceRef.value = null;
|
||||
});
|
||||
return {
|
||||
setOptions,
|
||||
echarts,
|
||||
};
|
||||
}
|
Reference in New Issue
Block a user