引用方式

<template>
  <div class="resizeContainer">
    
  </div>
</template>
<script setup>
  import { onMounted, nextTick, onBeforeUnmount } from 'vue';
  import { scaleBox } from 'ft-func-set';

  // 自适应分辨率
  const initScale = () => {
    const scale = new scaleBox({
      width: 1920,
      height: 1080,
      element: document.querySelector('.resizeContainer'),
      status: 'default'
    })
    scale.setScale()
  }

  onMounted(() => {
    nextTick(() => {
      initScale()
    })
    window.addEventListener('resize', initScale);
  })
  onBeforeUnmount(() => {
    window.removeEventListener('resize', initScale);
  });
</script>

Options: scaleBox 窗口按比例缩放

| Property | Description | type | default | | ----------------- | ---------------- | :--------: | :----------: | | height | 窗口高度 |Number| -- | | width | 窗口宽度 |Number | -- | | element | dom元素 | Object | -- | | status | 默认根据比例缩放default，或者根据宽度/高度进行缩放width、height | String | default |

Options: autoHover

| Property | Description | type | default | | ----------------- | ---------------- | :--------: | :----------: | | chart | ECharts实例 |Object| -- | | option | charts的配置信息 |Object | -- | | newNum | -- |Number | 14 | | newTime | -- |Number | 3000 | | scrollType | -- |String | tooltip |

Options: uuid 随机id

| Property | Description | type | default | | ----------------- | ---------------- | :--------: | :----------: | | len | 长度 |Number| -- | | radia | 基数 |Number | -- |

Options: waterMark 文本水印

| Property | Description | type | default | | ----------------- | ---------------- | :--------: | :----------: | | opt | 配置 |Object| { text: 'waterMark', degree: 30,... } | | -- | opt配置如下所示 |Object| -- | | text | 水印文本 |String| watermark | | degree | 水印文本旋转角度 |Number| -20 | | width | 单个水印容器宽度 |Number| 400 | | height | 单个水印容器高度 |Number| 200 | | fontSize | 水印字体 |String| 30px | | fontStyle | 水印字体 |String| 黑体 | | textAlign | 水印文本样式 |String| center | | color | 水印文本颜色 |String| rgba(100,100,100,0.15) | | id | 元素id，不传默认是body |String| -- |

Options: Websocketconfig 连接通信

| Property | Description | type | default | | ----------------- | ---------------- | :--------: | :----------: | | data | 配置 |Object| { src: '',... } | | -- | opt配置如下所示 |Object| -- | | src | 连接服务地址 |String| -- |