lime-echart

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用本技能

Use this skill whenever the user wants to:

Create ECharts charts in UniApp or UniAppX projects
Display data visualizations (line charts, bar charts, pie charts, etc.) in H5, mini-programs, or App
Configure and customize ECharts charts for cross-platform compatibility
Integrate ECharts into UniApp/UniAppX applications
Handle chart events and interactions in UniApp/UniAppX
Optimize chart performance in mobile environments
Use advanced ECharts features in UniApp/UniAppX

当用户有以下需求时，即可使用本技能：

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

How to use this skill

如何使用本技能

To use lime-echart in UniApp/UniAppX projects:

Install and configure lime-echart:
- Load
```
examples/getting-started/installation.md
```
  for installation instructions
- Load
```
examples/getting-started/basic-usage.md
```
  for basic setup and configuration
- Load
```
examples/getting-started/configuration.md
```
  for detailed configuration options

Choose the chart type based on the user's requirements:

Line chart/折线图 →
```
examples/charts/line-chart.md
```
Bar chart/柱状图 →
```
examples/charts/bar-chart.md
```
Pie chart/饼图 →
```
examples/charts/pie-chart.md
```
Scatter chart/散点图 →
```
examples/charts/scatter-chart.md
```
Radar chart/雷达图 →
```
examples/charts/radar-chart.md
```
Gauge chart/仪表盘 →
```
examples/charts/gauge-chart.md
```
Funnel chart/漏斗图 →
```
examples/charts/funnel-chart.md
```
Heatmap/热力图 →
```
examples/charts/heatmap.md
```
Tree chart/树图 →
```
examples/charts/tree-chart.md
```
Map chart/地图 →
```
examples/charts/map-chart.md
```
Candlestick chart/K线图 →
```
examples/charts/candlestick-chart.md
```
Boxplot chart/箱线图 →
```
examples/charts/boxplot-chart.md
```

Load the appropriate example file from the

examples/

directory:

examples/getting-started/installation.md

- Installation and setup

```
examples/getting-started/basic-usage.md
```
- Basic usage examples

examples/getting-started/configuration.md

- Configuration options

```
examples/charts/line-chart.md
```
- Line chart examples
```
examples/charts/bar-chart.md
```
- Bar chart examples
```
examples/charts/pie-chart.md
```
- Pie chart examples
```
examples/charts/scatter-chart.md
```
- Scatter chart examples
```
examples/charts/radar-chart.md
```
- Radar chart examples
```
examples/charts/gauge-chart.md
```
- Gauge chart examples
```
examples/charts/funnel-chart.md
```
- Funnel chart examples
```
examples/charts/heatmap.md
```
- Heatmap examples
```
examples/charts/tree-chart.md
```
- Tree chart examples
```
examples/charts/map-chart.md
```
- Map chart examples
```
examples/charts/candlestick-chart.md
```
- Candlestick chart examples
```
examples/charts/boxplot-chart.md
```
- Boxplot chart examples
```
examples/advanced/dynamic-data.md
```
- Dynamic data updates
```
examples/advanced/event-handling.md
```
- Chart event handling
```
examples/advanced/custom-theme.md
```
- Custom theme configuration
```
examples/advanced/multiple-charts.md
```
- Multiple charts on one page
```
examples/advanced/responsive-charts.md
```
- Responsive chart design

examples/advanced/performance-optimization.md

- Performance optimization

Follow the specific instructions in that example file for syntax, structure, and best practices
Reference the API documentation when needed:
- ```
api/component-api.md
```
  - Component API reference
- ```
api/methods-api.md
```
  - Methods API reference
- ```
api/events-api.md
```
  - Events API reference
- ```
api/options-api.md
```
  - Options API reference
Use templates for quick start:
- ```
templates/basic-chart.md
```
  - Basic chart template
- ```
templates/advanced-chart.md
```
  - Advanced chart template
- ```
templates/chart-with-data.md
```
  - Chart with data binding template

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

安装与配置lime-echart：
- 查看
```
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
```
K线图 →
```
examples/charts/candlestick-chart.md
```
箱线图 →
```
examples/charts/boxplot-chart.md
```

从
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

- 性能优化

遵循示例文件中的具体说明，包括语法、结构与最佳实践
必要时参考API文档：
- ```
api/component-api.md
```
  - 组件API参考
- ```
api/methods-api.md
```
  - 方法API参考
- ```
api/events-api.md
```
  - 事件API参考
- ```
api/options-api.md
```
  - 配置项API参考
使用模板快速上手：
- ```
templates/basic-chart.md
```
  - 基础图表模板
- ```
templates/advanced-chart.md
```
  - 高级图表模板
- ```
templates/chart-with-data.md
```
  - 数据绑定图表模板

Doc mapping (one-to-one with official documentation)

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

See examples and API files → https://ext.dcloud.net.cn/plugin?id=4899

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

Examples and Templates

示例与模板

This skill includes detailed examples organized to match the official documentation structure. All examples are in the

examples/

directory (see mapping above).

To use examples:

Identify the topic from the user's request
Load the appropriate example file from the mapping above
Follow the instructions, syntax, and best practices in that file
Adapt the code examples to your specific use case

To use templates:

Reference templates in
```
templates/
```
directory for common scaffolding
Adapt templates to your specific needs and coding style

本技能包含结构与官方文档匹配的详细示例，所有示例均存放于

examples/

目录（见上述映射关系）。

使用示例的方法：

根据用户需求确定相关主题
从上述映射关系中加载对应的示例文件
遵循文件中的说明、语法与最佳实践
根据具体使用场景调整代码示例

使用模板的方法：

参考
```
templates/
```
目录中的模板搭建通用框架
根据具体需求与编码风格调整模板内容

API Reference

API参考

Component API:
```
api/component-api.md
```
- lime-echart component properties and attributes
Methods API:
```
api/methods-api.md
```
- Available methods for chart manipulation
Events API:
```
api/events-api.md
```
- Chart events and event handling
Options API:
```
api/options-api.md
```
- ECharts options configuration reference

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

Best Practices

最佳实践

Platform Compatibility: Test charts on all target platforms (H5, mini-programs, App)
Performance: Use lazy loading for charts and optimize data volume
Responsive Design: Ensure charts adapt to different screen sizes
Data Format: Validate and format data before passing to charts
Error Handling: Implement proper error handling for chart initialization and data loading
Memory Management: Dispose charts properly when components are destroyed
Theme Consistency: Use consistent themes across your application
Accessibility: Consider accessibility when designing charts

平台兼容性：在所有目标平台（H5、小程序、App）上测试图表效果
性能优化：为图表启用懒加载并优化数据量
响应式设计：确保图表适配不同屏幕尺寸
数据格式：在传入图表前验证并格式化数据
错误处理：为图表初始化与数据加载实现完善的错误处理逻辑
内存管理：在组件销毁时正确销毁图表实例
主题一致性：在应用中使用统一的图表主题
可访问性：设计图表时考虑可访问性要求

Resources

资源

Official Plugin: https://ext.dcloud.net.cn/plugin?id=4899
ECharts Official Documentation: https://echarts.apache.org/
UniApp Documentation: https://uniapp.dcloud.net.cn/
UniAppX Documentation: https://uniapp.dcloud.net.cn/uni-app-x/

官方插件：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/

Keywords

关键词

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