chore: update

Author: Simon he

README.md

@@ -19,6 +19,51 @@ import {
 
 ```
 
+## sCharts
+- 简单的echarts图表封装
+- 不需要在onMounted中执行,可以在任意时刻使用
+- 参数:
+  - container: string | HTMLElement, 图表容器
+  - options: SChartsOption, echarts配置options,扩展了w: 初始化宽度, h: 初始化高度, theme: echarts主题, 所有的事件行为以on开头都会被调用
+  - autoResize: boolean, 是否自动调整宽高, 根据container容器的宽高自动撑满,监听window的resize事件,自动调整宽高 
+```javascript
+const charts = sCharts('#main', {
+  w: 500,
+  h: 300,
+  theme: 'dark',
+  xAxis: {
+    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+  },
+  yAxis: {},
+  series: [
+    {
+      type: 'bar',
+      data: [23, 24, 18, 25, 27, 28, 25],
+    },
+  ],
+})
+```
+
+## addEventListener
+- 给元素添加事件函数
+- 返回一个remove函数
+- 参数:
+  - target: Element | string, 目标元素
+  - eventName: string, 事件名称
+  - callback: (e)=>void, 回调函数
+  - capture: boolean, 是否捕获
+  - autoRemove: boolean, 是否自动移除事件
+```javascript
+const remove = addEventListener('#btn',
+  'click',
+  () => {
+    console.log('click')
+  }
+)
+addEventListener(document,'DOMContentLoaded', () => {
+  console.log('我就执行一次,然后事件就被自动移除了')
+}, false, true)
+```
 ## createElement
 - 创建dom函数
 - 参数:

package.json

@@ -55,12 +55,13 @@
     "@types/node": "^17.0.38",
     "@types/spark-md5": "^3.0.2",
     "bumpp": "^7.1.1",
+    "echarts": "^5.3.3",
     "eslint": "^8.16.0",
     "eslint-plugin-n": "^15.2.1",
     "express": "^4.18.1",
     "htmlparser2": "^8.0.1",
     "pkgroll": "^1.3.1",
-    "simon-js-tool": "workspace:^2.0.20",
+    "simon-js-tool": "workspace:^3.0.6",
     "spark-md5": "^3.0.2",
     "typescript": "^4.7.2",
     "vitest": "^0.14.2"

playground/src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { fileSplice } from '../../src'
+import { fileSplice, sCharts } from '../../src'
+
 // import { lazyLoad } from "../../src";
 // import { vFetch } from "../../src";
 // const upload = ref(null)
@@ -25,12 +26,55 @@ import { fileSplice } from '../../src'
 //   //   lazyLoad(img);
 //   // });
 // });
+// onMounted(() => {
+sCharts(
+  '#main',
+  {
+    w: 400,
+    h: 300,
+    theme: 'dark',
+    xAxis: {
+      data: ['A', 'B', 'C', 'D', 'E'],
+    },
+    yAxis: {},
+    series: [
+      {
+        type: 'bar',
+        data: [
+          10,
+          22,
+          28,
+          {
+            value: 43,
+            // 设置单个柱子的样式
+            itemStyle: {
+              color: '#91cc75',
+              shadowColor: '#91cc75',
+              borderType: 'dashed',
+              opacity: 0.5,
+            },
+          },
+          49,
+        ],
+        itemStyle: {
+          barBorderRadius: 5,
+          borderWidth: 1,
+          borderType: 'solid',
+          borderColor: '#73c0de',
+          shadowColor: '#5470c6',
+          shadowBlur: 3,
+        },
+      },
+    ],
+  },
+  true,
+)
+// });
 </script>
 
 <template>
-  <main font-sans p="x-4 y-10" text="center gray-700 dark:gray-200">
-    上传:<input ref="upload" type="file" name="" value="">
-    <router-view />
+  <main font-sans p=" y-10" text="center gray-700 dark:gray-200">
+    <div id="main" w-full ma inline-block />
     <Footer />
   </main>
   <!-- <img src="temp" data-src="../public/favicon.svg" alt="" h-10 bg-red /> -->

pnpm-lock.yaml

@@ -91,3 +91,5 @@ export { htmlTransform } from './htmlTransform'
 export { sleep } from './sleep'
 export { createElement } from './createElement'
 export { addLink } from './addLink'
+export { sCharts } from './sCharts'
+export { addEventListener } from './addEventListener'

src/index.ts

@@ -1,17 +1,19 @@
 import * as echarts from 'echarts'
-import type { EChartsOption, XAXisComponentOption, YAXisComponentOption } from 'echarts'
 import { isStr } from './isStr'
 import { addEventListener } from './addEventListener'
 
-interface SChartsOption extends EChartsOption {
+interface SChartsOption extends Record<string, any> {
   theme?: string | object
-  x: XAXisComponentOption | XAXisComponentOption[]
-  y: YAXisComponentOption | YAXisComponentOption[]
+  x: Record<string, any>
+  y: Record<string, any>
+  xAxis?: Record<string, any>
+  yAxis?: Record<string, any>
   w?: number
   h?: number
+
 }
 
-export function sCharts(container: string | HTMLElement, options: SChartsOption, autoResize: boolean = true): echarts.ECharts {
+export function sCharts(container: string | HTMLElement, options: SChartsOption, autoResize = true): echarts.ECharts {
   const fragment = document.createDocumentFragment()
   const { x, y, xAxis, yAxis, w = 100, h = 100 } = options