From b1e987944d36275906373fcd24705f37e1909f11 Mon Sep 17 00:00:00 2001
From: Tevin <tingquanren@163.com>
Date: Thu, 20 Mar 2025 20:00:49 +0800
Subject: [PATCH] 知识库文档，部分组件文档内容调整，部分文档优化文案
---
_cursor.ai/plugins.doc/echarts.doc/CECharts.doc.md | 96 +++++++++++++++++++----------------------------
1 files changed, 39 insertions(+), 57 deletions(-)
diff --git a/_cursor.ai/plugins.doc/echarts.doc/CECharts.doc.md b/_cursor.ai/plugins.doc/echarts.doc/CECharts.doc.md
index 2b6ea9e..4b9df5b 100644
--- a/_cursor.ai/plugins.doc/echarts.doc/CECharts.doc.md
+++ b/_cursor.ai/plugins.doc/echarts.doc/CECharts.doc.md
@@ -1,61 +1,32 @@
-# ECharts图表组件
+# CECharts 图表组件
-## 组件名称
+## 功能说明
-`CECharts` - 用于在小程序环境中渲染ECharts图表的组件
+该组件是对百度ECharts的封装，用于在小程序环境中渲染各类图表，支持触摸交互和数据更新。支持柱状图、折线图、饼图等各种ECharts支持的图表类型，组件内部已优化tooltip显示和触摸事件处理。
-## 组件说明
-
-该组件是对百度ECharts的封装，用于在小程序环境中渲染各类图表，支持触摸交互和数据更新。支持柱状图、折线图、饼图等各种ECharts支持的图表类型。
-
-## 使用方法
-
-```html
-<CECharts
- :canvasId="'chart-' + Math.random()"
- :onReady="handleChartReady"
-/>
-```
+## 引用方式
```js
-// 图表初始化回调
-handleChartReady(chart) {
- chart.setOption({
- title: {
- text: '销售统计'
- },
- tooltip: {},
- xAxis: {
- data: ['1月', '2月', '3月', '4月', '5月', '6月']
- },
- yAxis: {},
- series: [{
- name: '销量',
- type: 'bar',
- data: [5, 20, 36, 10, 10, 20]
- }]
- });
-}
+import { CECharts } from '@components/plugins/echarts';
```
-## 属性说明
+## 组件参数
-| 属性名 | 类型 | 默认值 | 说明 |
-| ------------ | -------- | -------- | --------------------------------------- |
-| canvasId | String | 随机生成 | 画布ID，用于标识图表实例 |
-| disableTouch | Boolean | false | 是否禁用触摸交互 |
-| onReady | Function | - | 图表准备就绪的回调函数，参数为chart实例 |
+- `canvasId` (String，默认值：随机生成)：画布ID，用于标识图表实例
+- `disableTouch` (Boolean，默认值：false)：是否禁用触摸交互
+- `onReady` (Function，可选)：图表准备就绪的回调函数
+ - 参数：`chart` (Object) ECharts实例对象，可通过此对象设置图表配置和数据
-## 方法说明
+## 实例方法
-组件内部对外暴露的方法：
-
-| 方法名 | 参数 | 说明 |
-| -------------------- | -------- | ---------------------- |
-| init | callback | 初始化图表方法 |
-| canvasToTempFilePath | opt | 将图表转为临时文件路径 |
+- `init`：初始化图表方法
+ - `callback` (Function，必填)：初始化完成的回调函数，参数为 `(canvas, width, height, dpr)`
+- `canvasToTempFilePath`：将图表转为临时文件路径
+ - `opt` (Object，必填)：微信小程序 canvasToTempFilePath 的参数对象
## 使用示例
+
+### 基础用法
```html
<template>
@@ -139,18 +110,29 @@
</script>
```
-## 默认配置说明
+### 保存图表为图片
-组件已经内置了一些默认配置：
-
-1. 禁用了渐进式渲染（progressive: 0）
-2. 配置了默认的 tooltip 样式
-3. 优化了 tooltip 的定位逻辑
+```js
+// 保存图表为图片
+saveChartAsImage() {
+ const _this = this;
+ this.$refs.salesChart.canvasToTempFilePath({
+ success(res) {
+ console.log('保存成功:', res.tempFilePath);
+ // 可以进一步使用 wx.saveImageToPhotosAlbum 保存到相册
+ },
+ fail(err) {
+ console.error('保存失败:', err);
+ }
+ });
+}
+```
## 注意事项
-1. 该组件暂时仅适用于小程序环境，文件名为 `CECharts.weapp.vue`
-2. 在小程序端使用需要确保 canvas 的 type 属性设置为 "2d"
-3. 小程序对 canvas 的性能有一定限制，复杂图表可能会有性能问题
-4. 组件自动会处理触摸事件，支持图表交互
-5. 如需保存图表为图片，可使用 canvasToTempFilePath 方法
\ No newline at end of file
+- 该组件暂时仅适用于小程序环境，文件名为 `CECharts.weapp.vue`
+- 在小程序端使用需要确保 canvas 的 type 属性设置为 "2d"
+- 小程序对 canvas 的性能有一定限制，复杂图表可能会有性能问题
+- 组件自动会处理触摸事件，支持图表交互
+- 组件已禁用了渐进式渲染（progressive: 0）以提高兼容性
+- 组件内置了默认的 tooltip 样式和位置优化逻辑
\ No newline at end of file
--
Gitblit v1.9.1