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