| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <script lang="ts" setup> |
| H | 2 | import type { EChartsOption } from 'echarts' |
| 3 | import echarts from '@/plugins/echarts' | |
| 4 | import { debounce } from 'lodash-es' | |
| 5 | import 'echarts-wordcloud' | |
| 6 | import { propTypes } from '@/utils/propTypes' | |
| 7 | import { PropType } from 'vue' | |
| 8 | import { useAppStore } from '@/store/modules/app' | |
| 9 | import { isString } from '@/utils/is' | |
| 10 | import { useDesign } from '@/hooks/web/useDesign' | |
| 11 | ||
| 12 | defineOptions({ name: 'EChart' }) | |
| 13 | ||
| 14 | const { getPrefixCls, variables } = useDesign() | |
| 15 | ||
| 16 | const prefixCls = getPrefixCls('echart') | |
| 17 | ||
| 18 | const appStore = useAppStore() | |
| 19 | ||
| 20 | const props = defineProps({ | |
| 21 | options: { | |
| 22 | type: Object as PropType<EChartsOption>, | |
| 23 | required: true | |
| 24 | }, | |
| 25 | width: propTypes.oneOfType([Number, String]).def(''), | |
| 26 | height: propTypes.oneOfType([Number, String]).def('500px') | |
| 27 | }) | |
| 28 | ||
| 29 | const isDark = computed(() => appStore.getIsDark) | |
| 30 | ||
| 31 | const theme = computed(() => { | |
| 32 | const echartTheme: boolean | string = unref(isDark) ? true : 'auto' | |
| 33 | ||
| 34 | return echartTheme | |
| 35 | }) | |
| 36 | ||
| 37 | const options = computed(() => { | |
| 38 | return Object.assign(props.options, { | |
| 39 | darkMode: unref(theme) | |
| 40 | }) | |
| 41 | }) | |
| 42 | ||
| 43 | const elRef = ref<ElRef>() | |
| 44 | ||
| 45 | let echartRef: Nullable<echarts.ECharts> = null | |
| 46 | ||
| 47 | const contentEl = ref<Element>() | |
| 48 | ||
| 49 | const styles = computed(() => { | |
| 50 | const width = isString(props.width) ? props.width : `${props.width}px` | |
| 51 | const height = isString(props.height) ? props.height : `${props.height}px` | |
| 52 | ||
| 53 | return { | |
| 54 | width, | |
| 55 | height | |
| 56 | } | |
| 57 | }) | |
| 58 | ||
| 59 | const initChart = () => { | |
| 60 | if (unref(elRef) && props.options) { | |
| 61 | echartRef = echarts.init(unref(elRef) as HTMLElement) | |
| 62 | echartRef?.setOption(unref(options)) | |
| 63 | } | |
| 64 | } | |
| 65 | ||
| 66 | watch( | |
| 67 | () => options.value, | |
| 68 | (options) => { | |
| 69 | if (echartRef) { | |
| 70 | echartRef?.setOption(options) | |
| 71 | } | |
| 72 | }, | |
| 73 | { | |
| 74 | deep: true | |
| 75 | } | |
| 76 | ) | |
| 77 | ||
| 78 | const resizeHandler = debounce(() => { | |
| 79 | if (echartRef) { | |
| 80 | echartRef.resize() | |
| 81 | } | |
| 82 | }, 100) | |
| 83 | ||
| 84 | const contentResizeHandler = async (e: TransitionEvent) => { | |
| 85 | if (e.propertyName === 'width') { | |
| 86 | resizeHandler() | |
| 87 | } | |
| 88 | } | |
| 89 | ||
| 90 | onMounted(() => { | |
| 91 | initChart() | |
| 92 | ||
| 93 | window.addEventListener('resize', resizeHandler) | |
| 94 | ||
| 95 | contentEl.value = document.getElementsByClassName(`${variables.namespace}-layout-content`)[0] | |
| 96 | unref(contentEl) && | |
| 97 | (unref(contentEl) as Element).addEventListener('transitionend', contentResizeHandler) | |
| 98 | }) | |
| 99 | ||
| 100 | onBeforeUnmount(() => { | |
| 101 | window.removeEventListener('resize', resizeHandler) | |
| 102 | unref(contentEl) && | |
| 103 | (unref(contentEl) as Element).removeEventListener('transitionend', contentResizeHandler) | |
| 104 | }) | |
| 105 | ||
| 106 | onActivated(() => { | |
| 107 | if (echartRef) { | |
| 108 | echartRef.resize() | |
| 109 | } | |
| 110 | }) | |
| 111 | </script> | |
| 112 | ||
| 113 | <template> | |
| 114 | <div ref="elRef" :class="[$attrs.class, prefixCls]" :style="styles"></div> | |
| 115 | </template> | |
