lime-echart

何时使用此技能

当用户希望执行以下操作时，请使用此技能：

• 在 UniApp 或 UniAppX 项目中创建 ECharts 图表
• 在 H5、小程序或 App 中展示数据可视化内容（折线图、柱状图、饼图等）
• 配置和自定义 ECharts 图表，以实现跨平台兼容
• 在 UniApp/UniAppX 应用中集成 ECharts
• 在 UniApp/UniAppX 中处理图表事件和交互
• 优化图表在移动环境中的性能
• 在 UniApp/UniAppX 中使用 ECharts 高级功能

如何使用此技能

在 UniApp/UniAppX 项目中使用 lime-echart：

1. 安装并配置 lime-echart：

   • 加载 examples/getting-started/installation.md，查看安装说明
   • 加载 examples/getting-started/basic-usage.md，查看基本设置和配置
   • 加载 examples/getting-started/configuration.md，查看详细配置选项

2. 根据用户需求选择图表类型：

   • 折线图/折线图 → examples/charts/line-chart.md
   • 柱状图/柱状图 → examples/charts/bar-chart.md
   • 饼图/饼图 → examples/charts/pie-chart.md
   • 散点图/散点图 → examples/charts/scatter-chart.md
   • 雷达图/雷达图 → examples/charts/radar-chart.md
   • 仪表盘/仪表盘 → examples/charts/gauge-chart.md
   • 漏斗图/漏斗图 → examples/charts/funnel-chart.md
   • 热力图/热力图 → examples/charts/heatmap.md
   • 树图/树图 → examples/charts/tree-chart.md
   • 地图/地图 → examples/charts/map-chart.md
   • K 线图/K 线图 → examples/charts/candlestick-chart.md
   • 箱线图/箱线图 → examples/charts/boxplot-chart.md

3. 从 examples/ 目录加载合适的示例文件：

   • examples/getting-started/installation.md - 安装和设置
   • examples/getting-started/basic-usage.md - 基本用法示例
   • examples/getting-started/configuration.md - 配置选项
   • examples/charts/line-chart.md - 折线图示例
   • examples/charts/bar-chart.md - 柱状图示例
   • examples/charts/pie-chart.md - 饼图示例
   • examples/charts/scatter-chart.md - 散点图示例
   • examples/charts/radar-chart.md - 雷达图示例
   • examples/charts/gauge-chart.md - 仪表盘示例
   • examples/charts/funnel-chart.md - 漏斗图示例
   • examples/charts/heatmap.md - 热力图示例
   • examples/charts/tree-chart.md - 树图示例
   • examples/charts/map-chart.md - 地图示例
   • examples/charts/candlestick-chart.md - K 线图示例
   • examples/charts/boxplot-chart.md - 箱线图示例
   • examples/advanced/dynamic-data.md - 动态数据更新
   • examples/advanced/event-handling.md - 图表事件处理
   • examples/advanced/custom-theme.md - 自定义主题配置
   • examples/advanced/multiple-charts.md - 在同一页面显示多个图表
   • examples/advanced/responsive-charts.md - 响应式图表设计
   • examples/advanced/performance-optimization.md - 性能优化

4. 遵循该示例文件中的具体说明，了解语法、结构和最佳实践

5. 必要时参考 API 文档：

   • api/component-api.md - 组件 API 参考
   • api/methods-api.md - 方法 API 参考
   • api/events-api.md - 事件 API 参考
   • api/options-api.md - 选项 API 参考

6. 使用模板快速开始：

   • templates/basic-chart.md - 基本图表模板
   • templates/advanced-chart.md - 高级图表模板
   • templates/chart-with-data.md - 数据绑定图表模板

文档映射（与官方文档一一对应）

• 查看示例和 API 文件 → https://ext.dcloud.net.cn/plugin?id=4899

示例和模板

此技能包含详细示例，按官方文档结构组织。所有示例都位于 examples/ 目录中（参见上方映射）。

使用示例：

• 根据用户请求确定主题
• 从上方映射中加载相应的示例文件
• 遵循该文件中的说明、语法和最佳实践
• 根据具体用例调整代码示例

使用模板：

• 参考 templates/ 目录中的模板，了解常见脚手架
• 根据具体需求和编码风格调整模板

API 参考

• 组件 API：api/component-api.md - lime-echart 组件属性和特性
• 方法 API：api/methods-api.md - 图表操作可用方法
• 事件 API：api/events-api.md - 图表事件和事件处理
• 选项 API：api/options-api.md - ECharts 选项配置参考

最佳实践

1. 平台兼容性：在所有目标平台（H5、小程序、App）上测试图表
2. 性能：对图表使用延迟加载，并优化数据量
3. 响应式设计：确保图表适配不同屏幕尺寸
4. 数据格式：将数据传入图表前进行验证和格式化
5. 错误处理：为图表初始化和数据加载实现恰当的错误处理
6. 内存管理：组件销毁时妥善释放图表
7. 主题一致性：在应用中使用统一的主题
8. 无障碍访问：设计图表时考虑无障碍访问

资源

• 官方插件：https://ext.dcloud.net.cn/plugin?id=4899
• ECharts 官方文档：https://echarts.apache.org/
• UniApp 文档：https://uniapp.dcloud.net.cn/
• UniAppX 文档：https://uniapp.dcloud.net.cn/uni-app-x/

关键词

lime-echart, echart, echarts, uniapp, uniappx, chart, visualization, line chart, bar chart, pie chart, scatter chart, radar chart, gauge chart, funnel chart, heatmap, tree chart, map chart, candlestick chart, boxplot chart, 图表, 折线图, 柱状图, 饼图, 散点图, 雷达图, 仪表盘, 漏斗图, 热力图, 树图, 地图, K线图, 箱线图