From 6ef49cb04763c9299205a987dc0d29f443208cd7 Mon Sep 17 00:00:00 2001 From: Coffee-crocodile <1147347984@qq.com> Date: Wed, 11 Jan 2023 17:04:34 +0800 Subject: [PATCH] =?UTF-8?q?feat(hooks):=20=E5=AE=8C=E5=96=84useEcharts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitattributes | 16 + src/components/common/ErrorTip.vue | 34 +- src/hooks/useEcharts.ts | 177 +++++--- src/main.ts | 3 + src/views/login/index.vue | 124 ++++-- src/views/plugin/charts/echarts/index.vue | 517 +++++++++++++++++++++- vite.config.ts | 2 +- 7 files changed, 746 insertions(+), 127 deletions(-) create mode 100644 .gitattributes diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..00864b9 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,16 @@ +"*.vue" eol=lf +"*.js" eol=lf +"*.ts" eol=lf +"*.jsx" eol=lf +"*.tsx" eol=lf +"*.cjs" eol=lf +"*.cts" eol=lf +"*.mjs" eol=lf +"*.mts" eol=lf +"*.json" eol=lf +"*.html" eol=lf +"*.css" eol=lf +"*.less" eol=lf +"*.scss" eol=lf +"*.sass" eol=lf +"*.styl" eol=lf diff --git a/src/components/common/ErrorTip.vue b/src/components/common/ErrorTip.vue index 1068f40..25de154 100644 --- a/src/components/common/ErrorTip.vue +++ b/src/components/common/ErrorTip.vue @@ -1,9 +1,29 @@ @@ -12,8 +32,8 @@ import { useAppRouter } from '@/hooks'; type TipType = '403' | '404' | '500'; defineProps<{ - /** 异常类型 403 404 500 */ - type: TipType; + /** 异常类型 403 404 500 */ + type: TipType; }>(); const { toRoot } = useAppRouter(); diff --git a/src/hooks/useEcharts.ts b/src/hooks/useEcharts.ts index 7a44a85..0e18362 100644 --- a/src/hooks/useEcharts.ts +++ b/src/hooks/useEcharts.ts @@ -1,87 +1,144 @@ import * as echarts from 'echarts/core'; -import { nextTick, ref, onUnmounted, onMounted } from 'vue'; +import { nextTick, ref, onUnmounted, watch } from 'vue'; import type { Ref } from 'vue'; -import { BarChart, LineChart } from 'echarts/charts'; +import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts'; // 系列类型的定义后缀都为 SeriesOption -import type { BarSeriesOption, LineSeriesOption } from 'echarts/charts'; +import type { + BarSeriesOption, + LineSeriesOption, + PieSeriesOption, + RadarSeriesOption, +} from 'echarts/charts'; -import { - TitleComponent, - TooltipComponent, - GridComponent, - DatasetComponent, // 数据集组件 - TransformComponent, // 内置数据转换器组件 (filter, sort) -} from 'echarts/components'; // 组件类型的定义后缀都为 ComponentOption import type { - TitleComponentOption, - TooltipComponentOption, - GridComponentOption, - DatasetComponentOption, + TitleComponentOption, + TooltipComponentOption, + GridComponentOption, + LegendComponentOption, + DatasetComponentOption, + ToolboxComponentOption, +} from 'echarts/components'; +import { + TitleComponent, + TooltipComponent, + GridComponent, + LegendComponent, + DatasetComponent, // 数据集组件 + TransformComponent, // 内置数据转换器组件 (filter, sort) + ToolboxComponent, } from 'echarts/components'; import { LabelLayout, UniversalTransition } from 'echarts/features'; import { CanvasRenderer } from 'echarts/renderers'; +import { useAppStore } from '@/store'; +import { useElementSize } from '@vueuse/core'; // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型 export type ECOption = echarts.ComposeOption< - | BarSeriesOption - | LineSeriesOption - | TitleComponentOption - | TooltipComponentOption - | GridComponentOption - | DatasetComponentOption + | BarSeriesOption + | PieSeriesOption + | LineSeriesOption + | TitleComponentOption + | TooltipComponentOption + | GridComponentOption + | LegendComponentOption + | DatasetComponentOption + | ToolboxComponentOption + | RadarSeriesOption >; // 注册必须的组件 echarts.use([ - TitleComponent, - TooltipComponent, - GridComponent, - DatasetComponent, - TransformComponent, - BarChart, - LineChart, - LabelLayout, - UniversalTransition, - CanvasRenderer, + TitleComponent, + TooltipComponent, + GridComponent, + LegendComponent, + DatasetComponent, + TransformComponent, + BarChart, + PieChart, + LineChart, + LabelLayout, + UniversalTransition, + CanvasRenderer, + ToolboxComponent, + RadarChart, ]); +/** + * Echarts hooks函数 + * @param options - 图表配置 + * @description 按需引入图表组件，没注册的组件需要先引入 + */ export function useEcharts(options: Ref) { - const domRef = ref(); + const appStore = useAppStore(); - let chart: echarts.ECharts | null = null; + const domRef = ref(); - async function render() { - if (domRef.value) { - chart = echarts.init(domRef.value); - update(options.value); - } - } - function isRendered() { - return Boolean(domRef.value && chart); - } - function destroy() { - chart?.dispose(); - chart = null; - } + let chart: echarts.ECharts | null = null; - function update(updateOptions: ECOption) { - if (isRendered()) { - chart!.setOption({ ...updateOptions, backgroundColor: 'transparent' }); - } - } + const initialSize = { width: 0, height: 0 }; + const { width, height } = useElementSize(domRef, initialSize); - onMounted(async () => { - await nextTick(); - render(); - }); - onUnmounted(() => { - destroy(); - }); + function canRender() { + return initialSize.width > 0 && initialSize.height > 0; + } - return { - domRef, - }; + function isRendered() { + return Boolean(domRef.value && chart); + } + async function render() { + const chartTheme = appStore.darkMode ? 'dark' : 'light'; + await nextTick(); + if (domRef.value) { + chart = echarts.init(domRef.value, chartTheme); + update(options.value); + } + } + + function update(updateOptions: ECOption) { + if (isRendered()) { + chart!.setOption({ ...updateOptions, backgroundColor: 'transparent' }); + } + } + + function resize() { + chart?.resize(); + } + + function destroy() { + chart?.dispose(); + chart = null; + } + const sizeWatch = watch([width, height], ([newWidth, newHeight]) => { + initialSize.width = newWidth; + initialSize.height = newHeight; + if (newWidth === 0 && newHeight === 0) { + // 节点被删除 将chart置为空 + chart = null; + } + if (!canRender()) return; + if (isRendered()) { + resize(); + } else { + render(); + } + }); + + const OptionWatch = watch(options, (newValue) => { + console.log(newValue); + update(newValue); + }); + + onUnmounted(() => { + sizeWatch(); + OptionWatch(); + destroy(); + }); + + return { + domRef, + }; } diff --git a/src/main.ts b/src/main.ts index 6d8993a..4bb5d4f 100644 --- a/src/main.ts +++ b/src/main.ts @@ -11,6 +11,7 @@ async function setupApp() { // 载入全局loading加载状态 const appLoading = createApp(AppLoading); appLoading.mount('#appLoading'); + // 创建vue实例 const app = createApp(App); // 安装pinia全局状态库 @@ -19,5 +20,7 @@ async function setupApp() { await setupRouter(app); // 挂载 await app.mount('#app'); + // 卸载载入动画 + appLoading.unmount(); } setupApp(); diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 8bcbde7..53d9782 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -1,24 +1,54 @@