⚡

LimeECharts技能Skill lime-echart

Lime ECharts 技能是一个用于 UniApp 和 UniAppX 平台的图表库插件，帮助开发者快速创建和配置各种数据可视化图表，如折线图、柱状图、饼图等，支持跨平台兼容、交互功能和性能优化。关键词包括：lime-echart, 数据可视化, 图表, uniapp, 前端开发。

前端开发 0 次安装 0 次浏览 更新于 3/21/2026

name: lime-echart description: 提供 Lime ECharts 的全面指南，包括图表创建、配置、数据可视化和交互式图表。当用户询问 Lime ECharts、需要创建图表、可视化数据或使用 ECharts 功能时使用。 license: 完整条款见 LICENSE.txt

何时使用此技能

每当用户想要以下操作时使用此技能：

  • 在 UniApp 或 UniAppX 项目中创建 ECharts 图表
  • 在 H5、小程序或 App 中显示数据可视化（折线图、柱状图、饼图等）
  • 配置和自定义 ECharts 图表以实现跨平台兼容性
  • 将 ECharts 集成到 UniApp/UniAppX 应用程序中
  • 在 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线图 → 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 - 带有数据绑定的图表模板

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

示例和模板

此技能包括详细示例，组织方式与官方文档结构匹配。所有示例都在 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. 可访问性：设计图表时考虑可访问性

资源

关键词

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线图, 箱线图