adtec-core-package 0.3.2 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adtec-core-package",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "private": false,
   "type": "module",
   "scripts": {
@@ -13,27 +13,29 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
-    "@onlyoffice/document-editor-vue": "1.4.0",
     "@element-plus/icons-vue": "^2.3.1",
-    "pinia-plugin-store": "^2.2.9",
-    "crypto-js": "^4.2.0",
-    "jsencrypt": "^3.3.2",
+    "@onlyoffice/document-editor-vue": "1.4.0",
+    "@types/echarts": "^5.0.0",
     "axios": "^1.7.7",
+    "crypto-js": "^4.2.0",
+    "echarts": "^5.6.0",
     "element-plus": "^2.8.7",
+    "jsencrypt": "^3.3.2",
     "pinia": "^2.3.0",
+    "pinia-plugin-store": "^2.2.9",
     "scss": "^0.2.4",
     "scss-loader": "^0.0.1",
+    "socket.io-client": "^2.3.1",
+    "uuid": "^11.0.3",
     "vue": "^3.5.13",
     "vue-focus-lock": "^3.0.0",
-    "vue-router": "^4.5.0",
-    "uuid": "^11.0.3",
-    "socket.io-client": "^2.3.1",
-    "vue-img-viewr": "2.0.11"
+    "vue-img-viewr": "2.0.11",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
-    "@types/node": "^22.10.2",
     "@types/crypto-js": "^4.2.2",
+    "@types/node": "^22.10.2",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitejs/plugin-vue-jsx": "^4.1.1",
     "@vue/eslint-config-prettier": "^10.1.0",

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>

package/src/hooks/useEcharts.ts

@@ -0,0 +1,58 @@
+/**
+ * 创建人 胡啸东
+ * 说明: useEcharts
+ * 创建时间: 2024/11/4 下午4:51
+ * 修改时间: 2024/11/4 下午4:51
+ */
+import { onBeforeUnmount, onDeactivated, onMounted,  shallowRef, unref } from 'vue'
+import type{Ref}from 'vue'
+import echarts from '../plugins/echartsConfig.ts'
+
+export type EChartsCoreOption = echarts.EChartsCoreOption
+
+const useEcharts = (elRef: Ref<HTMLDivElement>, options: EChartsCoreOption) => {
+  const charts = shallowRef<echarts.ECharts>()
+
+  const setOptions = (options: EChartsCoreOption) => {
+    charts.value && charts.value.setOption(options)
+  }
+
+  // 初始化
+  const initCharts = (themeColor?: Array<string>) => {
+    const el = unref(elRef)
+    if (!el || !unref(el)) {
+      return
+    }
+    charts.value = echarts.init(el)
+    if (themeColor) {
+      options.color = themeColor
+    }
+    setOptions(options)
+  }
+
+  // 重新窗口变化时，重新计算
+  const resize = () => {
+    charts.value && charts.value.resize()
+  }
+
+  onMounted(() => {
+    window.addEventListener('resize', resize)
+  })
+
+  // 页面keepAlive时，不监听页面
+  onDeactivated(() => {
+    window.removeEventListener('resize', resize)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', resize)
+  })
+
+  return {
+    initCharts,
+    setOptions,
+    resize
+  }
+}
+
+export { useEcharts }

package/src/mixin/globalMixin.ts

@@ -15,6 +15,7 @@ import ElTableColumnEdit from '../components/Table/ElTableColumnEdit.vue'
 import vKeydown from '../directives/vKeydown'
 import ElAutoToolTip from '../components/autoToolTip/ElAutoToolTip.vue'
 import userSelect from '../components/business/userSelect.vue'
+import baseEcharts from '../components/baseEcharts/index.vue'
 //@ts-ignore
 export const globalMixin = {
   components: {
@@ -26,7 +27,9 @@ export const globalMixin = {
     ElIconBtn,
     ElIconSearch,
     ElTableColumnEdit,
-    ElAutoToolTip,userSelect
+    ElAutoToolTip,
+    userSelect,
+    baseEcharts,
   },
   directives: {
     keydown: vKeydown,

package/src/plugins/echartsConfig.ts

@@ -0,0 +1,80 @@
+/**
+ * 创建人 胡啸东
+ * 说明: echartsConfig
+ * 创建时间: 2024/11/4 下午4:50
+ * 修改时间: 2024/11/4 下午4:50
+ */
+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from 'echarts/core'
+//
+// 引入内置组件，组件后缀都为Component
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  LegendComponent,
+  RadarComponent,
+  ToolboxComponent,
+  DatasetComponent, // 数据集组件
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  CalendarComponent,
+  GraphicComponent,
+  TransformComponent, // 数据转换器组件(filter, sort)
+} from 'echarts/components'
+
+// 引入渲染器：echarst默认使用canvas渲染，引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer, SVGRenderer } from 'echarts/renderers'
+
+// 标签自动布局、全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from 'echarts/features'
+
+// 引入图表类型，后缀都为Chart
+import {
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  RadarChart,
+  PictorialBarChart,
+} from 'echarts/charts'
+
+// 注册必须的组件
+echarts.use([
+  // 内置组件
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  PolarComponent,
+  AriaComponent,
+  ParallelComponent,
+  LegendComponent,
+  RadarComponent,
+  ToolboxComponent,
+  DatasetComponent,
+  DataZoomComponent,
+  VisualMapComponent,
+  TimelineComponent,
+  CalendarComponent,
+  GraphicComponent,
+  TransformComponent,
+  // 渲染器
+  CanvasRenderer,
+  SVGRenderer,
+  // 特性
+  LabelLayout,
+  UniversalTransition,
+  // 图表
+  BarChart,
+  LineChart,
+  PieChart,
+  MapChart,
+  RadarChart,
+  PictorialBarChart,
+])
+
+export default echarts