stellar-ui-plus 1.25.2 → 1.25.4

package/components/ste-area-chart/README.md

@@ -99,6 +99,23 @@
 </script>
 ```
 
+## 事件
+
+- 属性`getImage`: 通过ref来获取实例的base64格式的图片地址，异步方法,需在实例生成后调用。
+
+```html
+<template>
+    <ste-area-chart :series="series1" :categories1="categories1" ref="areaChart"></ste-area-chart>
+</template>
+<script setup lang="ts">
+    import { ref,onMounted } from 'vue';
+    let areaChart: any = ref(null);
+    onMounted(async () => {
+        const base64 = await areaChart.value.getImage()
+    }),
+</script>
+```
+
 ---$
 
 <!-- props -->

package/components/ste-area-chart/ste-area-chart.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import uCharts from '../../Charts/Charts';
-import { ref, onMounted, computed, type CSSProperties, watch, getCurrentInstance } from 'vue';
+import { ref, onMounted, computed, type CSSProperties, watch, getCurrentInstance, type ComponentPublicInstance } from 'vue';
 import utils from '../../utils/utils';
 import { propsData, propsComponent } from './props';
 import type { ChartsOptions } from '../../Charts/types/index';
@@ -99,6 +99,38 @@ function tap(e: any) {
     charts.value?.touchLegend(e);
     charts.value?.showToolTip(e);
 }
+const thas = ref<ComponentPublicInstance | null>();
+async function getImage() {
+    if (props.canvas2d == false) {
+        return new Promise(resolve => {
+            uni.canvasToTempFilePath(
+                {
+                    canvasId: canvasId.value,
+                    success: res => {
+                        resolve(res.tempFilePath);
+                    },
+                },
+                thas.value
+            );
+        });
+    } else {
+        return new Promise(resolve => {
+            const query = uni.createSelectorQuery().in(thas.value);
+            query
+                .select('#' + canvasId.value)
+                .fields({ node: true, size: true })
+                .exec(res => {
+                    if (res[0]) {
+                        const canvas = res[0].node;
+                        resolve(canvas.toDataURL('image/png'));
+                    }
+                });
+        });
+    }
+}
+defineExpose({
+    getImage,
+});
 </script>
 
 <style scoped></style>

package/components/ste-bar-chart/README.md

@@ -69,6 +69,23 @@
 </script>
 ```
 
+## 事件
+
+- 属性`getImage`: 通过ref来获取实例的base64格式的图片地址，异步方法,需在实例生成后调用。
+
+```html
+<template>
+    <ste-bar-chart :series="series1" :categories="['2018', '2019', '2020']" width="660" height="400" ref="barChart"></ste-bar-chart>
+</template>
+<script setup lang="ts">
+    import { ref,onMounted } from 'vue';
+    let barChart: any = ref(null);
+    onMounted(async () => {
+        const base64 = await barChart.value.getImage()
+    }),
+</script>
+```
+
 ---$
 
 <!-- props -->

package/components/ste-bar-chart/ste-bar-chart.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import uCharts from '../../Charts/Charts';
-import { ref, onMounted, computed, type CSSProperties, watch, getCurrentInstance } from 'vue';
+import { ref, onMounted, computed, type CSSProperties, watch, getCurrentInstance, type ComponentPublicInstance } from 'vue';
 import utils from '../../utils/utils';
 import { propsData, propsComponent } from './props';
 import type { ChartsOptions, ChartsSerie } from '../../Charts/types/index';
@@ -95,4 +95,37 @@ function tap(e: any) {
     charts.value?.touchLegend(e);
     charts.value?.showToolTip(e);
 }
+
+const thas = ref<ComponentPublicInstance | null>();
+async function getImage() {
+    if (props.canvas2d == false) {
+        return new Promise(resolve => {
+            uni.canvasToTempFilePath(
+                {
+                    canvasId: canvasId.value,
+                    success: res => {
+                        resolve(res.tempFilePath);
+                    },
+                },
+                thas.value
+            );
+        });
+    } else {
+        return new Promise(resolve => {
+            const query = uni.createSelectorQuery().in(thas.value);
+            query
+                .select('#' + canvasId.value)
+                .fields({ node: true, size: true })
+                .exec(res => {
+                    if (res[0]) {
+                        const canvas = res[0].node;
+                        resolve(canvas.toDataURL('image/png'));
+                    }
+                });
+        });
+    }
+}
+defineExpose({
+    getImage,
+});
 </script>

package/components/ste-column-chart/README.md

@@ -107,6 +107,23 @@
 </script>
 ```
 
+## 事件
+
+- 属性`getImage`: 通过ref来获取实例的base64格式的图片地址，异步方法,需在实例生成后调用。
+
+```html
+<template>
+    <ste-column-chart :series="series" :categories="categories" ref="columnChart"></ste-column-chart>
+</template>
+<script setup lang="ts">
+    import { ref,onMounted } from 'vue';
+    let columnChart: any = ref(null);
+    onMounted(async () => {
+        const base64 = await columnChart.value.getImage()
+    }),
+</script>
+```
+
 ---$
 
 <!-- props -->

package/components/ste-column-chart/ste-column-chart.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import uCharts from '../../Charts/Charts';
-import { ref, onMounted, computed, type CSSProperties, watch, getCurrentInstance } from 'vue';
+import { ref, onMounted, computed, type CSSProperties, watch, getCurrentInstance, type ComponentPublicInstance } from 'vue';
 import utils from '../../utils/utils';
 import { propsData, propsComponent } from './props';
 import type { ChartsOptions } from '../../Charts/types/index';
@@ -96,6 +96,39 @@ function tap(e: any) {
     charts.value?.touchLegend(e);
     charts.value?.showToolTip(e);
 }
+
+const thas = ref<ComponentPublicInstance | null>();
+async function getImage() {
+    if (props.canvas2d == false) {
+        return new Promise(resolve => {
+            uni.canvasToTempFilePath(
+                {
+                    canvasId: canvasId.value,
+                    success: res => {
+                        resolve(res.tempFilePath);
+                    },
+                },
+                thas.value
+            );
+        });
+    } else {
+        return new Promise(resolve => {
+            const query = uni.createSelectorQuery().in(thas.value);
+            query
+                .select('#' + canvasId.value)
+                .fields({ node: true, size: true })
+                .exec(res => {
+                    if (res[0]) {
+                        const canvas = res[0].node;
+                        resolve(canvas.toDataURL('image/png'));
+                    }
+                });
+        });
+    }
+}
+defineExpose({
+    getImage,
+});
 </script>
 
 <style scoped></style>

package/components/ste-funnel-chart/README.md

@@ -109,6 +109,23 @@
 </script>
 ```
 
+## 事件
+
+- 属性`getImage`: 通过ref来获取实例的base64格式的图片地址，异步方法,需在实例生成后调用。
+
+```html
+<template>
+    <ste-funnel-chart :series="series" ref="funnelChart"></ste-funnel-chart>
+</template>
+<script setup lang="ts">
+    import { ref,onMounted } from 'vue';
+    let funnelChart: any = ref(null);
+    onMounted(async () => {
+        const base64 = await funnelChart.value.getImage()
+    }),
+</script>
+```
+
 ---$
 
 <!-- props -->

package/components/ste-funnel-chart/ste-funnel-chart.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import uCharts from '../../Charts/Charts';
-import { ref, onMounted, computed, type CSSProperties, watch, getCurrentInstance } from 'vue';
+import { ref, onMounted, computed, type CSSProperties, watch, getCurrentInstance, type ComponentPublicInstance } from 'vue';
 import utils from '../../utils/utils';
 import { propsData, propsComponent } from './props';
 import type { ChartsOptions } from '../../Charts/types/index';
@@ -95,6 +95,39 @@ function tap(e: any) {
     charts.value?.touchLegend(e);
     charts.value?.showToolTip(e);
 }
+
+const thas = ref<ComponentPublicInstance | null>();
+async function getImage() {
+    if (props.canvas2d == false) {
+        return new Promise(resolve => {
+            uni.canvasToTempFilePath(
+                {
+                    canvasId: canvasId.value,
+                    success: res => {
+                        resolve(res.tempFilePath);
+                    },
+                },
+                thas.value
+            );
+        });
+    } else {
+        return new Promise(resolve => {
+            const query = uni.createSelectorQuery().in(thas.value);
+            query
+                .select('#' + canvasId.value)
+                .fields({ node: true, size: true })
+                .exec(res => {
+                    if (res[0]) {
+                        const canvas = res[0].node;
+                        resolve(canvas.toDataURL('image/png'));
+                    }
+                });
+        });
+    }
+}
+defineExpose({
+    getImage,
+});
 </script>
 
 <style scoped></style>

package/components/ste-line-chart/README.md

@@ -113,6 +113,23 @@
 </script>
 ```
 
+## 事件
+
+- 属性`getImage`: 通过ref来获取实例的base64格式的图片地址，异步方法,需在实例生成后调用。
+
+```html
+<template>
+    <ste-line-chart :series="series" :categories="categories" ref="lineChart"></ste-line-chart>
+</template>
+<script setup lang="ts">
+    import { ref,onMounted } from 'vue';
+    let lineChart: any = ref(null);
+    onMounted(async () => {
+        const base64 = await lineChart.value.getImage()
+    }),
+</script>
+```
+
 ---$
 
 <!-- props -->

package/components/ste-line-chart/ste-line-chart.vue

@@ -7,7 +7,7 @@
 <script setup lang="ts">
 import uCharts from '../../Charts/Charts';
 let uChartsInstance: { [key: string]: any } = {};
-import { ref, onMounted, computed, type CSSProperties, watch, getCurrentInstance } from 'vue';
+import { ref, onMounted, computed, type CSSProperties, watch, getCurrentInstance, type ComponentPublicInstance } from 'vue';
 import utils from '../../utils/utils';
 import { propsData, propsComponent } from './props';
 import type { ChartsOptions } from '../../Charts/types/index';
@@ -98,6 +98,39 @@ function tap(e: any) {
     charts.value?.touchLegend(e);
     charts.value?.showToolTip(e);
 }
+
+const thas = ref<ComponentPublicInstance | null>();
+async function getImage() {
+    if (props.canvas2d == false) {
+        return new Promise(resolve => {
+            uni.canvasToTempFilePath(
+                {
+                    canvasId: canvasId.value,
+                    success: res => {
+                        resolve(res.tempFilePath);
+                    },
+                },
+                thas.value
+            );
+        });
+    } else {
+        return new Promise(resolve => {
+            const query = uni.createSelectorQuery().in(thas.value);
+            query
+                .select('#' + canvasId.value)
+                .fields({ node: true, size: true })
+                .exec(res => {
+                    if (res[0]) {
+                        const canvas = res[0].node;
+                        resolve(canvas.toDataURL('image/png'));
+                    }
+                });
+        });
+    }
+}
+defineExpose({
+    getImage,
+});
 </script>
 
 <style scoped></style>

package/components/ste-pie-chart/README.md

@@ -81,6 +81,23 @@
 </script>
 ```
 
+## 事件
+
+- 属性`getImage`: 通过ref来获取实例的base64格式的图片地址，异步方法,需在实例生成后调用。
+
+```html
+<template>
+    <ste-pie-chart :series="series1" width="420" height="420" :enableScroll="false" ref="pieChart"></ste-pie-chart>
+</template>
+<script setup lang="ts">
+    import { ref,onMounted } from 'vue';
+    let pieChart: any = ref(null);
+    onMounted(async () => {
+        const base64 = await pieChart.value.getImage()
+    }),
+</script>
+```
+
 ---$
 
 <!-- props -->

package/components/ste-pie-chart/ste-pie-chart.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import uCharts from '../../Charts/Charts';
-import { ref, onMounted, computed, type CSSProperties, watch, getCurrentInstance } from 'vue';
+import { ref, onMounted, computed, type CSSProperties, watch, getCurrentInstance, type ComponentPublicInstance } from 'vue';
 import utils from '../../utils/utils';
 import { propsData, propsComponent } from './props';
 import type { ChartsOptions, ChartsSerie } from '../../Charts/types/index';
@@ -97,6 +97,39 @@ function tap(e: any) {
     charts.value?.touchLegend(e);
     charts.value?.showToolTip(e);
 }
+
+const thas = ref<ComponentPublicInstance | null>();
+async function getImage() {
+    if (props.canvas2d == false) {
+        return new Promise(resolve => {
+            uni.canvasToTempFilePath(
+                {
+                    canvasId: canvasId.value,
+                    success: res => {
+                        resolve(res.tempFilePath);
+                    },
+                },
+                thas.value
+            );
+        });
+    } else {
+        return new Promise(resolve => {
+            const query = uni.createSelectorQuery().in(thas.value);
+            query
+                .select('#' + canvasId.value)
+                .fields({ node: true, size: true })
+                .exec(res => {
+                    if (res[0]) {
+                        const canvas = res[0].node;
+                        resolve(canvas.toDataURL('image/png'));
+                    }
+                });
+        });
+    }
+}
+defineExpose({
+    getImage,
+});
 </script>
 
 <style scoped></style>

package/components/ste-ring-chart/ste-ring-chart.vue

@@ -44,8 +44,11 @@ const chartStyle = computed(() => {
     return style;
 });
 
+const thas = ref<ComponentPublicInstance | null>();
+
 onMounted(() => {
     ctx.value = uni.createCanvasContext(canvasId.value, getCurrentInstance());
+    thas.value = getCurrentInstance()?.proxy;
     drawCharts(props.series);
 });
 
@@ -95,20 +98,15 @@ function tap(e: any) {
     charts?.value.touchLegend(e);
     charts?.value.showToolTip(e);
 }
-const thas = ref<ComponentPublicInstance | null>();
-const emits = defineEmits<{
-    (e: 'getImage'): String;
-}>();
 
 async function getImage() {
-    console.log('getImage', props.canvas2d);
     if (props.canvas2d == false) {
         return new Promise(resolve => {
             uni.canvasToTempFilePath(
                 {
                     canvasId: canvasId.value,
                     success: res => {
-                        resolve(emits('getImage', res.tempFilePath));
+                        resolve(res.tempFilePath);
                     },
                 },
                 thas.value
@@ -121,10 +119,8 @@ async function getImage() {
                 .select('#' + canvasId.value)
                 .fields({ node: true, size: true })
                 .exec(res => {
-                    console.log('res[0]', res[0].node.toDataURL('image/png'));
                     if (res[0]) {
                         const canvas = res[0].node;
-                        emits('getImage', canvas.toDataURL('image/png'));
                         resolve(canvas.toDataURL('image/png'));
                     }
                 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "stellar-ui-plus",
-    "version": "1.25.2",
+    "version": "1.25.4",
     "description": "",
     "author": "",
     "license": "MIT",