lime-echart

使用此技能的场景

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

• 在 UniApp 或 UniAppX 中创建 ECharts 图表（折线图、柱状图、饼图、散点图、雷达图、仪表盘等）
• 在 H5、小程序或原生 App 中展示数据可视化
• 在 UniApp 中处理图表事件、动态数据更新或自定义主题
• 优化图表在移动环境中的性能

如何使用此技能

工作流

1. 安装 lime-echart - 加载 examples/getting-started/installation.md
2. 选择图表类型 - 根据需求选择下方的图表类型
3. 加载示例文件 - 每种图表类型在 examples/charts/ 中都有专属示例
4. 自定义 - 根据 API 文档调整选项、主题和数据绑定

快速入门示例：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>

图表类型参考

图表	文件	使用场景
折线图	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	展示单项指标

API 参考

• api/component-api.md - 组件属性和特性
• api/methods-api.md - 图表操作方法
• api/events-api.md - 事件处理（点击、悬停、缩放）
• api/options-api.md - 完整的 ECharts 选项参考

最佳实践

1. 卸载时销毁 - 在 onUnload 中调用 chart.dispose()，以防止内存泄漏
2. 延迟加载图表 - 仅在图表滚动进入视口时初始化
3. 进行跨平台测试 - 在 H5、微信小程序和原生 App 上验证
4. 优化数据量 - 在移动设备上渲染前，对大型数据集进行降采样
5. 使用 CSS 设置尺寸 - 通过 CSS 设置图表容器尺寸，而非使用内联样式

资源

• 官方插件：https://ext.dcloud.net.cn/plugin?id=4899
• ECharts 文档：https://echarts.apache.org/

关键词

lime-echart, echarts, uniapp, uniappx, chart, visualization, 图表, 折线图, 柱状图, 饼图, data visualization, mobile chart