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、WeChat ミニプログラム、ネイティブ 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