When to use this skill
Use this skill whenever the user wants to:
- Create ECharts charts (line, bar, pie, scatter, radar, gauge, etc.) in UniApp or UniAppX
- Display data visualizations in H5, mini-programs, or native App
- Handle chart events, dynamic data updates, or custom themes in UniApp
- Optimize chart performance for mobile environments
How to use this skill
Workflow
- Install lime-echart - Load
examples/getting-started/installation.md - Choose chart type - Match the requirement to the chart type below
- Load the example file - Each chart type has a dedicated example in
examples/charts/ - Customize - Adjust options, theme, and data binding per the API docs
Quick-Start Example: Line Chart in UniApp
<template>
<view class="chart-container">
<l-echart ref="chartRef" @bindinit="onInit" />
</view>
</template>
<script>
import * as echarts from '@nicefan/lime-echart/echarts';
export default {
methods: {
onInit(chart) {
chart.setOption({
xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
yAxis: { type: 'value' },
series: [{
type: 'line',
data: [120, 200, 150, 80, 270],
smooth: true,
lineStyle: { color: '#5470c6' }
}]
});
}
}
};
</script>
<style>
.chart-container { width: 100%; height: 300px; }
</style>Chart Type Reference
| Chart | File | Use Case |
|---|---|---|
| Line | examples/charts/line-chart.md | Trends over time |
| Bar | examples/charts/bar-chart.md | Category comparison |
| Pie | examples/charts/pie-chart.md | Proportions |
| Scatter | examples/charts/scatter-chart.md | Correlation |
| Radar | examples/charts/radar-chart.md | Multi-dimension comparison |
| Gauge | examples/charts/gauge-chart.md | Single metric display |
API Reference
api/component-api.md- Component properties and attributesapi/methods-api.md- Chart manipulation methodsapi/events-api.md- Event handling (click, hover, zoom)api/options-api.md- Full ECharts options reference
Best Practices
- Dispose on unmount - Call
chart.dispose()inonUnloadto prevent memory leaks - Lazy load charts - Initialize charts only when they scroll into view
- Test cross-platform - Verify on H5, WeChat mini-program, and native App
- Optimize data volume - Downsample large datasets before rendering on mobile
- Use CSS sizing - Set chart container dimensions via CSS, not inline styles
Resources
- Official Plugin: https://ext.dcloud.net.cn/plugin?id=4899
- ECharts Docs: https://echarts.apache.org/
Keywords
lime-echart, echarts, uniapp, uniappx, chart, visualization, 图表, 折线图, 柱状图, 饼图, data visualization, mobile chart