-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add VChartLight and VChart.server
- Loading branch information
1 parent
273be24
commit c9d688d
Showing
9 changed files
with
198 additions
and
49 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <script setup lang="ts"></script> | ||
|
|
||
| <template> | ||
| <VChartServer v-bind="$attrs" /> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| <script lang="ts"> | ||
| import { | ||
| hydrate, | ||
| type ECSSRClientEventParams, | ||
| type ECSSREvent, | ||
| } from 'echarts/ssr/client/index' | ||
| import type { InitOptions, Option, Theme } from '../types' | ||
| import { useAttrs, watch, nextTick, ref, onMounted, defineComponent } from 'vue' | ||
| import type VChartServer from './VChartServer.vue' | ||
| export default defineComponent({ | ||
| inheritAttrs: false, | ||
| emits: {} as unknown as Record<ECSSREvent, ECSSRHandler>, | ||
| }) | ||
| </script> | ||
|
|
||
| <script setup lang="ts"> | ||
| const props = defineProps<{ | ||
| option?: Option | ||
| theme?: Theme | ||
| initOptions?: InitOptions | ||
| }>() | ||
| defineOptions({ inheritAttrs: false }) | ||
| // defineEmits<{ | ||
| // (e: ECSSREvent, params: ECSSRClientEventParams): string | undefined | ||
| // }>() | ||
| type ECSSRHandler = (params: ECSSRClientEventParams) => string | undefined | ||
| type ECSSREventOn = `on${Capitalize<ECSSREvent>}` | ||
| const root = ref<HTMLElement | null>(null) | ||
| const attrs = useAttrs() as Partial<Record<ECSSREventOn, ECSSRHandler>> | ||
| let container: HTMLElement | ||
| function updateChart(svgStr?: string) { | ||
| if (container) { | ||
| if (svgStr != null) container.innerHTML = svgStr | ||
| // Use the lightweight runtime to give the chart interactive capabilities | ||
| hydrate(container, { | ||
| on: { | ||
| click: attrs.onClick | ||
| ? (params) => { | ||
| console.log('11') | ||
| const svg = attrs.onClick!(params) | ||
| svg && updateChart(svg) | ||
| } | ||
| : undefined, | ||
| mouseout: attrs.onMouseout | ||
| ? (params) => { | ||
| const svg = attrs.onMouseout!(params) | ||
| svg && updateChart(svg) | ||
| } | ||
| : undefined, | ||
| mouseover: attrs.onMouseover | ||
| ? (params) => { | ||
| const svg = attrs.onMouseover!(params) | ||
| svg && updateChart(svg) | ||
| } | ||
| : undefined, | ||
| }, | ||
| }) | ||
| } else { | ||
| console.warn('chart-container not found') | ||
| } | ||
| } | ||
| watch( | ||
| [() => props.option, () => props.initOptions, () => props.theme], | ||
| async () => { | ||
| await nextTick() | ||
| updateChart() | ||
| }, | ||
| ) | ||
| onMounted(async () => { | ||
| await nextTick() | ||
| container = root.value?.querySelector?.('.vue-echarts-inner') as HTMLElement | ||
| updateChart() | ||
| const observer = new MutationObserver(() => { | ||
| console.log('jin') | ||
| updateChart() | ||
| }) | ||
| // call 'observe' on that MutationObserver instance, | ||
| // passing it the element to observe, and the options object | ||
| observer.observe(container, { | ||
| characterData: false, | ||
| childList: true, | ||
| attributes: false, | ||
| }) | ||
| }) | ||
| defineExpose({ updateChart }) | ||
| </script> | ||
|
|
||
| <template> | ||
| <div ref="root"> | ||
| <VChartServer :option="option" :init-options="initOptions" :theme="theme" /> | ||
| </div> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <script setup lang="ts"> | ||
| import { computed, unref, inject } from 'vue' | ||
| import type { InitOptions, Option, Theme } from '../types' | ||
| import { THEME_KEY, INIT_OPTIONS_KEY } from '../utils/injection' | ||
| const defaultTheme = inject(THEME_KEY, null) | ||
| const defaultInitOptions = inject(INIT_OPTIONS_KEY, null) | ||
| const props = defineProps<{ | ||
| option?: Option | ||
| theme?: Theme | ||
| initOptions?: InitOptions | ||
| }>() | ||
| const realTheme = computed(() => props.theme || unref(defaultTheme) || {}) | ||
| const realInitOptions = computed( | ||
| // @ts-expect-error unknown computed type error | ||
| () => props.initOptions || unref(defaultInitOptions) || {}, | ||
| ) | ||
| </script> | ||
|
|
||
| <template> | ||
| <VChartIsland | ||
| :theme="realTheme" | ||
| :option="option" | ||
| :init-options="realInitOptions" | ||
| /> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import type { InjectionKey } from 'vue' | ||
| import type { | ||
| ThemeInjection, | ||
| InitOptionsInjection, | ||
| UpdateOptionsInjection, | ||
| } from '../types' | ||
|
|
||
| export const THEME_KEY = 'ecTheme' as unknown as InjectionKey<ThemeInjection> | ||
| export const INIT_OPTIONS_KEY = | ||
| 'ecInitOptions' as unknown as InjectionKey<InitOptionsInjection> | ||
| export const UPDATE_OPTIONS_KEY = | ||
| 'ecUpdateOptions' as unknown as InjectionKey<UpdateOptionsInjection> | ||
| export { LOADING_OPTIONS_KEY } from '../composables' |