| | |
|---|
| | | # 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> |
|---|
| | |
|---|
| | | </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 方法 |
|---|
| | | - 该组件暂时仅适用于小程序环境，文件名为 `CECharts.weapp.vue` |
|---|
| | | - 在小程序端使用需要确保 canvas 的 type 属性设置为 "2d" |
|---|
| | | - 小程序对 canvas 的性能有一定限制，复杂图表可能会有性能问题 |
|---|
| | | - 组件自动会处理触摸事件，支持图表交互 |
|---|
| | | - 组件已禁用了渐进式渲染（progressive: 0）以提高兼容性 |
|---|
| | | - 组件内置了默认的 tooltip 样式和位置优化逻辑 |
|---|
