lime-echart

このスキルを使用するタイミング

ユーザーが次のことを希望する場合は、いつでもこのスキルを使用してください。

• UniApp または UniAppX プロジェクトで ECharts のチャートを作成する
• H5、ミニプログラム、または App でデータを可視化する（折れ線グラフ、棒グラフ、円グラフなど）
• クロスプラットフォームで互換性のある ECharts のチャートを設定、カスタマイズする
• UniApp／UniAppX アプリケーションに ECharts を統合する
• 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
   • ローソク足チャート → 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 - ローソク足チャートの例
   • 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 - 1 ページ上の複数のチャート
   • 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 - データバインディング付きチャートのテンプレート

ドキュメントの対応関係（公式ドキュメントと 1 対 1 で対応）

• サンプルと API ファイルを参照 → https://ext.dcloud.net.cn/plugin?id=4899

例とテンプレート

このスキルには、公式ドキュメントの構成に合わせて整理された詳細な例が含まれています。すべての例は 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. アクセシビリティ：チャートの設計時にはアクセシビリティを考慮します

リソース

• 公式プラグイン：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/

キーワード

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