From 3b03f87a02458f719e2eb4bf112a13441b427d14 Mon Sep 17 00:00:00 2001
From: ‘chensiAb’ <‘chenchenco03@163.com’>
Date: Tue, 25 Mar 2025 13:54:34 +0800
Subject: [PATCH] Merge branch 'master' of ssh://dev.zhiheiot.com:29418/mob-components
---
_cursor.ai/plugins.doc/echarts.doc/CECharts.doc.md | 138 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 138 insertions(+), 0 deletions(-)
diff --git a/_cursor.ai/plugins.doc/echarts.doc/CECharts.doc.md b/_cursor.ai/plugins.doc/echarts.doc/CECharts.doc.md
new file mode 100644
index 0000000..4b9df5b
--- /dev/null
+++ b/_cursor.ai/plugins.doc/echarts.doc/CECharts.doc.md
@@ -0,0 +1,138 @@
+# CECharts 图表组件
+
+## 功能说明
+
+该组件是对百度ECharts的封装，用于在小程序环境中渲染各类图表，支持触摸交互和数据更新。支持柱状图、折线图、饼图等各种ECharts支持的图表类型，组件内部已优化tooltip显示和触摸事件处理。
+
+## 引用方式
+
+```js
+import { CECharts } from '@components/plugins/echarts';
+```
+
+## 组件参数
+
+- `canvasId` (String，默认值：随机生成)：画布ID，用于标识图表实例
+- `disableTouch` (Boolean，默认值：false)：是否禁用触摸交互
+- `onReady` (Function，可选)：图表准备就绪的回调函数
+ - 参数：`chart` (Object) ECharts实例对象，可通过此对象设置图表配置和数据
+
+## 实例方法
+
+- `init`：初始化图表方法
+ - `callback` (Function，必填)：初始化完成的回调函数，参数为 `(canvas, width, height, dpr)`
+- `canvasToTempFilePath`：将图表转为临时文件路径
+ - `opt` (Object，必填)：微信小程序 canvasToTempFilePath 的参数对象
+
+## 使用示例
+
+### 基础用法
+
+```html
+<template>
+ <view class="page">
+ <view class="chart-container">
+ <CECharts
+ ref="salesChart"
+ :onReady="handleSalesChartReady"
+ />
+ </view>
+ </view>
+</template>
+
+<script>
+import { CECharts } from '@components/plugins/echarts';
+
+export default {
+ components: {
+ CECharts
+ },
+ data() {
+ return {
+ salesData: []
+ }
+ },
+ methods: {
+ // 图表准备就绪回调
+ handleSalesChartReady(chart) {
+ // 保存图表实例
+ this.chart = chart;
+
+ // 设置图表配置
+ chart.setOption({
+ title: {
+ text: '月度销售统计',
+ left: 'center'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'category',
+ data: ['1月', '2月', '3月', '4月', '5月', '6月']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ name: '销量',
+ type: 'bar',
+ data: [10, 52, 200, 334, 390, 330]
+ }]
+ });
+ },
+
+ // 更新图表数据
+ updateChartData(newData) {
+ if (!this.chart) return;
+
+ this.chart.setOption({
+ series: [{
+ data: newData
+ }]
+ });
+ }
+ },
+ mounted() {
+ // 获取数据
+ setTimeout(() => {
+ const newData = [50, 120, 180, 80, 70, 110];
+ this.updateChartData(newData);
+ }, 2000);
+ }
+}
+</script>
+```
+
+### 保存图表为图片
+
+```js
+// 保存图表为图片
+saveChartAsImage() {
+ const _this = this;
+ this.$refs.salesChart.canvasToTempFilePath({
+ success(res) {
+ console.log('保存成功:', res.tempFilePath);
+ // 可以进一步使用 wx.saveImageToPhotosAlbum 保存到相册
+ },
+ fail(err) {
+ console.error('保存失败:', err);
+ }
+ });
+}
+```
+
+## 注意事项
+
+- 该组件暂时仅适用于小程序环境，文件名为 `CECharts.weapp.vue`
+- 在小程序端使用需要确保 canvas 的 type 属性设置为 "2d"
+- 小程序对 canvas 的性能有一定限制，复杂图表可能会有性能问题
+- 组件自动会处理触摸事件，支持图表交互
+- 组件已禁用了渐进式渲染（progressive: 0）以提高兼容性
+- 组件内置了默认的 tooltip 样式和位置优化逻辑
\ No newline at end of file
--
Gitblit v1.9.1