61-design/echarts-beautifier-v2

ECharts Beautifier v2

データからインタラクティブでレポート対応のECharts HTMLを生成します。データアナリスト向けに最適化：まず分析目標を理解し、次にデータをプロファイリングし、チャートを選択し、視覚スタイルを選び、ナラティブコンテキストを含む自己完結型のHTMLアーティファクトを提供します。

これをEChartsのコーディングチュートリアルにしないでください。ユーザーがoptions、JavaScript、またはCSSを記述する必要はありません。

ワークフロー

ステップ0：分析ブリーフ

チャートを選択する前に、ユーザーの目標を推測します：

• トレンド：経時変化、季節性、スパイク、減少、成長。
• 比較：ランキング、グループ差、目標達成度、前後比較。
• 構成：シェア、貢献度、構造、構成変化。
• 分布：ばらつき、集中度、外れ値、ロングテール。
• コンバージョン：ファネル、離脱率、ステージ効率。
• フロー：起点-ターゲットの移動、パス、移行、アトリビューション。
• ポジショニング：2指標のトレードオフ、象限、バブル比較。
• 例外：異常値、閾値違反、特異なセグメント。
• サマリー：複数のビューにわたるエグゼクティブまたは運用のナラティブ。

意図が明確な場合は自動的に適応します。複数の意図が実質的に異なる結論につながる場合は、簡潔な確認の質問を1つ行います。

ステップ1：データの取り込みと信頼性

構造化データは以下の優先順位で扱います：Excel/CSV/JSON、コピーされたテーブルテキスト、明確なテーブルスクリーンショット、明確なチャートスクリーンショット、ぼやけた画像やラベルのない画像。

画像の場合、まず構造化された行と列を抽出します。抽出が部分的または近似の場合は、結果を推定/不完全とラベル付けし、精度が必要な場合は元のデータを求めます。入力が画像またはスクリーンショットの場合は、references/image-data-input.mdを参照してください。

ステップ2：データプロファイル

以下を特定します：時間粒度、メジャー、ディメンション、分子/分母、単位、サンプルサイズ、欠損値、外れ値、重複行、合計、パーセンテージが既に計算されているかどうか、ランキングやシェアの計算が有効かどうか。

ステップ3：チャートルート

分析意図を第一に、データ構造を第二に考慮してチャートを選択します。チャートの選択が明確でない場合は、references/chart-selection-matrix.mdのルーティングマトリックスを参照してください。

出力には常にチャート選択の理由を短く記述します。例：「このタスクは多くのカテゴリを長いラベルで比較するため、水平ランキング棒グラフを選択しました。」

ステップ4：スタイルルート

対象者と用途に基づいて1つのレポートスタイルを選択します：

• ビジネスレポート：洗練されたエグゼクティブ向けレポートアウト。
• 運用レビュー：情報量の多い運用監視。
• 探索：フィルターと比較機能を備えたアナリストワークスペース。
• ダークスクリーン：ウォールボードまたはコマンドセンター表示。
• 埋め込み：ドキュメント、Wiki、軽量共有用のコンパクトなHTML。

テーマ付きHTMLアーティファクトを生成する前に、references/style-recipes.mdを参照してください。

ステップ5：HTMLデリバラブル

EChartsを使用して自己完結型のHTMLページを生成します。以下を含めます：

• タイトル、サブタイトル、分析ブリーフ。
• 主要な発見事項または現在の最良の解釈。
• データソースと信頼性に関する注記。
• チャート選択の理由。
• インタラクティブなツールチップ、凡例/フィルター（有用な場合）、レスポンシブレイアウト、モバイル動作。
• ピーク、ディップ、閾値、ベースライン、離脱ポイント、象限ラベルなど、必要な注釈。

読み取り速度を低下させる装飾的な複雑さは避けます。凝った見た目にする前に、チャートを有用にします。

バリデーションチェックリスト

提供前に確認すること：

• 選択したチャートが指定された分析目標と一致している。
• メジャー、分母、単位、時間粒度が表示されているか文書化されている。
• HTMLがコンソールエラーなしでレンダリングされ、モバイルでリサイズされる。
• ツールチップがアナリストのレビューに十分な詳細を表示する。
• ナラティブがデータの信頼性を超えて主張していない。
• 生成されたすべてのファイルが明確に命名され、ユーザー成果物を作成する際に新しい出力フォルダに配置されている。

例

examples/内のファイルをコンパクトなルーティング例として使用します：

• 01_trend_sales.json
• 02_ranking_channels.json
• 03_composition_category.json
• 04_funnel_conversion.json
• 05_heatmap_time_segment.json
• 06_sankey_user_flow.json
• 07_quadrant_strategy.json
• 08_image_table_retention.json