feat-返回chart实例 & 文档补充

sscfaith · Jan 26, 2024 · 4587c14 · 4587c14
1 parent 4ae8a20
commit 4587c14
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/docs/components/TChart/base.md b/docs/components/TChart/base.md
@@ -1,10 +1,21 @@
 # Chart 图表
 
-基于 Echarts 二次封装的, 集成初始化 echarts、销毁，详情配置，请参考 echarts 官方
+基于 Echarts 二次封装的, 集成初始化 echarts、事件、销毁，详情配置，请参考 echarts 官方
 
 ### 前提概要
 
-TODO
+需要引入 echarts 资源
+
+```js
+npm install echarts
+```
+
+并在 main 文件中注册使用
+
+```js
+import * as echarts from 'echarts' // 引入echarts
+app.config.globalProperties.$echarts = echarts // 全局使用
+```
 
 ### 折线图
 
@@ -24,12 +35,6 @@ TChart/bar
 TChart/pie
 :::
 
-### 折线图
-
-:::demo
-TChart/line
-:::
-
 ### 雷达图
 
 :::demo
@@ -38,7 +43,13 @@ TChart/radar
 
 ### 2、配置参数
 
-| 参数   | 说明                                                                | 类型   | 默认值 |
-| :----- | :--------------------------                                         | :----- | :----- |
-| option | echarts 配置                                                        | object | -      |
-| id     | 容器 ref 值，默认六位随机数                                         | string | -      |
+| 参数   | 说明                        | 类型   | 默认值 |
+| :----- | :-------------------------- | :----- | :----- |
+| option | echarts 配置                | object | -      |
+| id     | 容器 ref 值，默认六位随机数 | string | -      |
+
+### 3、事件（events）集成 echarts 的事件
+
+| 事件名 | 说明              | 回调参数        |
+| :----- | :---------------- | :-------------- |
+| chart  | 返回的 chart 实例 | 返回 chart 实例 |
diff --git a/docs/examples/TChart/line.vue b/docs/examples/TChart/line.vue
@@ -15,6 +15,7 @@
         @mouseout="mouseout"
         @globalout="globalout"
         @contextmenu="contextmenu"
+        @chart="chart"
       />
     </t-layout-page-item>
   </t-layout-page>
@@ -65,4 +66,9 @@ const globalout = (e) => {
 const contextmenu = (e) => {
   console.log('contextmenu-----', e)
 }
+
+const chartRef = ref(null)
+const chart = (dom) => {
+  chartRef.value = dom
+}
 </script>
diff --git a/packages/chart/src/index.vue b/packages/chart/src/index.vue
@@ -30,18 +30,21 @@ const props = defineProps({
 
 const echartRef = ref<HTMLDivElement>()
 const chart = ref()
-const emit = defineEmits()
+const emits = defineEmits()
 // 图表初始化
 const renderChart = () => {
   chart.value = markRaw(proxy.$echarts.init(echartRef.value))
   setOption(props.options)
 
+  // 返回chart实例
+  emits('chart', chart.value)
+
   // 监听图表事件
   const events = Object.entries(useAttrs())
   events.forEach(([key, value]) => {
-    if (key.startsWith('on')) {
+    if (key.startsWith('on') && !key.startsWith('onChart')) {
       const on = toLine(key).substring(3)
-      chart.value.on(on, (...args) => emit(on, ...args))
+      chart.value.on(on, (...args) => emits(on, ...args))
     }
   })