adtec-core-package 0.3.3 → 0.3.4

package/src/components/baseEcharts/index.vue

@@ -0,0 +1,48 @@
+<!--创建人 胡啸东-->
+<!--说明: index-->
+<!--创建时间: 2024/11/4 下午4:52-->
+<!--修改时间: 2024/11/4 下午4:52-->
+<template>
+  <div
+    ref="echartsRef"
+    :style="{
+      width: width,
+      height: height,
+    }"
+  />
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, watch, type PropType } from 'vue'
+import { useEcharts, type EChartsCoreOption } from '../../hooks/useEcharts.ts' // 引入hooks
+const props = defineProps({
+  options: { type: Object as PropType<EChartsCoreOption>, required: true },
+  height: { type: String, default: '100%' },
+  width: { type: String, default: '100%' },
+  themeColors: { type: Array as PropType<string[]>, default: () => [] },
+})
+
+const echartsRef = ref()
+
+const { setOptions, initCharts } = useEcharts(echartsRef, props.options)
+
+watch(
+  () => props.options,
+  (nVal) => {
+    let targetOptions: EChartsCoreOption = {}
+    if (props.themeColors && props.themeColors.length > 0) {
+      targetOptions = { ...nVal }
+      targetOptions.color = props.themeColors
+    } else {
+      targetOptions = { ...nVal }
+    }
+    setOptions(targetOptions)
+  },
+  { deep: true },
+)
+
+onMounted(() => {
+  initCharts()
+})
+defineExpose({ setOptions, initCharts })
+</script>