/ الدليل / الملعب / MCP ECharts
← كل الخوادم ↗ GitHub
● مجتمع hustcc ⚡ فوري

MCP ECharts

بواسطة hustcc · hustcc/mcp-echarts

ECharts عبر MCP - يختار الوكلاء المخطط الصحيح (خط، شريط، دائري، مبعثر، خريطة حرارية، سانكي، رادار...) ويعيدون PNG/SVG أو كائن خيار أولي.

يقوم hustcc/mcp-echarts بتغليف Apache ECharts خلف خادم MCP. تغطي أكثر من 15 أداة للمخططات عائلة ECharts القياسية - الخط، والشريط، والمنطقة، والدائرية، والتشتت، والرادار، والخريطة الحرارية، وsankey، والقمع، والخريطة الشجرية، وsunburst، والمزيد - مع مرور بناء جملة ECharts الكامل. يتم عرضه محليًا (سحابة صفر)، أو تصديره إلى PNG / SVG، أو إرجاع كائن "خيار" ECharts الخام حتى تتمكن من لصقه في مثيل ECharts الخاص بك. يقوم تكامل MinIO الاختياري بتحميل الصور التي تم إنشاؤها إلى وحدة تخزين الكائنات للمشاركة.

▶ شاهد العرض 📦 التثبيت 💡 حالات الاستخدام

لماذا تستخدمه

الميزات الأساسية

عرض مباشر

كيف يبدو في الممارسة

mcp-echarts.replay ▶ جاهز
0/0

التثبيت

اختر العميل

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

افتح Claude Desktop → Settings → Developer → Edit Config. أعد التشغيل بعد الحفظ.

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

يستخدم Cursor نفس مخطط mcpServers مثل Claude Desktop. إعدادات المشروع أولى من الإعدادات العامة.

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

انقر على أيقونة MCP Servers في شريط Cline الجانبي، ثم "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

نفس الصيغة مثل Claude Desktop. أعد تشغيل Windsurf لتطبيق التغييرات.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "mcp-echarts",
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  ]
}

يستخدم Continue مصفوفة من كائنات الخادم بدلاً من خريطة.

~/.config/zed/settings.json
{
  "context_servers": {
    "mcp-echarts": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-echarts"
        ]
      }
    }
  }
}

أضف إلى context_servers. يعيد Zed التحميل تلقائيًا عند الحفظ.

claude mcp add mcp-echarts -- npx -y mcp-echarts

أمر من سطر واحد. تحقق باستخدام claude mcp list. احذف باستخدام claude mcp remove.

حالات الاستخدام

استخدامات عملية: MCP ECharts

تحويل جدول الأرقام إلى مخطط في استدعاء أداة واحدة

👤 المحللون ومديرو المشروعات والمهندسون العاملون في الدردشة ⏱ ~5 min beginner

متى تستخدمه: لديك مجموعة بيانات صغيرة وتريد عرضًا مرئيًا دون فتح جدول بيانات.

المتطلبات الأساسية
  • العقدة 18+ — تثبيت nvm 18
الخطوات
  1. وصف الرسم البياني
    مخطط شريطي للمستخدمين النشطين أسبوعيًا: الاثنين 820، الثلاثاء 905، الأربعاء 1120، الخميس 980، الجمعة 1340، السبت 780، الأحد 610. أطلق عليه "WAU by day".✓ تم النسخ
    → يختار الوكيل generator_bar_chart مع تسميات وقيم المحور السيني الصحيحة
  2. تصدير PNG
    قم بالتصدير بصيغة PNG واحفظه في ~/charts/wau.png.✓ تم النسخ
    → تم إرجاع الملف؛ png_path في نتيجة الأداة

النتيجة: مخطط يمكنك إسقاطه في المجموعة أو المستند دون مغادرة الدردشة.

المزالق
  • طلب مخطط دائري لمجموعة بيانات تحتوي على أكثر من 30 فئة — يجب على الوكيل اقتراح الشريط/الخريطة الحرارية بدلاً من ذلك؛ فرض ذلك باستخدام "استخدام المخطط الشريطي، الفطيرة غير قابلة للقراءة"
اجمعها مع: filesystem

احصل على خيار ECharts الخام للصقه في لوحة معلومات React/Vue

👤 يقوم مطورو الواجهة الأمامية ببناء الأدوات الداخلية ⏱ ~15 min intermediate

متى تستخدمه: تريد من كلود أن يقوم بصياغة تكوين المخطط بحيث لا تقوم بتعديله إلا في تطبيقك.

المتطلبات الأساسية
  • الواجهة الأمامية باستخدام ECharts — npm تثبيت الرسوم البيانية
الخطوات
  1. اسأل عن الخيار JSON
    قم بإنشاء خيار ECharts لمخطط مساحي مكدس: ثلاث سلاسل (مباشرة، عضوية، مدفوعة)، شهريًا لعام 2025.✓ تم النسخ
    → شكل الإرجاع هو كائن خيار يحتوي على سلسلة[].type:'line'، وareaStyle، وstack:'total'
  2. إسقاط في المكون الخاص بك
    الآن قم بإصداره كـ TypeScript const المسمى ExportOption.✓ تم النسخ
    → TS ثابت جاهز للصق

النتيجة: تكوين ECharts جاهز للإنتاج دون صياغة القالب المعياري يدويًا.

المزالق
  • يقوم الوكيل بإرجاع PNG عندما تريد هذا الخيار — قل "خيار الإرجاع JSON فقط - بدون عرض"
اجمعها مع: antv-chart

تصور التدفق (مسار التحويل، الرحلة، التحويل) باعتباره سانكي

👤 محللو النمو/المنتج ⏱ ~10 min beginner

متى تستخدمه: أنت بحاجة إلى مخطط تدفق لسطح السفينة وسانكي هي الأداة الصحيحة.

الخطوات
  1. وصف العقد والتدفقات
    سانكي: الهبوط (1000) → الاشتراك (420) → المنشط (310) → مدفوع (95). إظهار النسب المئوية للانسحاب.✓ تم النسخ
    → بنية العقدة/الارتباط الصحيحة؛ التسميات تشمل التهم
  2. تصدير SVG
    قم بتصدير SVG بحيث يتم قياسه في Keynote.✓ تم النسخ
    → تم حفظ مسار SVG

النتيجة: سانكي هش لمراجعة القمع، بدون فيجما.

اجمعها مع: markmap-mcp-server

نشر المخططات التي تم إنشاؤها إلى MinIO للمشاركة

👤 الفرق التي تدير مخزن كائنات مستضاف ذاتيًا ⏱ ~20 min intermediate

متى تستخدمه: تريد عناوين URL قابلة للتكرار للمخططات التي سترجع إليها من Slack/Notion.

المتطلبات الأساسية
  • نقطة نهاية MinIO + بيانات الاعتماد — توفير MINIO_* env vars في تكوين عميل MCP الخاص بك
الخطوات
  1. تكوين البيئة
    قم بتعيين MINIO_ENDPOINT وMINIO_ACCESS_KEY وMINIO_SECRET_KEY وMINIO_BUCKET_NAME في تهيئة MCP.✓ تم النسخ
    → تقارير الخادم تم تمكين MinIO عند بدء التشغيل
  2. توليد وتحميل
    رسم الإيرادات حسب المنطقة؛ قم بالتحميل إلى MinIO وأعطني عنوان URL.✓ تم النسخ
    → تم إرجاع عنوان URL العام (أو المميز).

النتيجة: روابط ثابتة للمخططات التي لن تنقطع بعد بدء الدردشة.

المزالق
  • تسرب بيانات الاعتماد في التكوين — استخدم مستخدم IAM مخصصًا على نطاق الحاوية، وليس مفتاح جذر MinIO
اجمعها مع: s3-like MCPs

التركيبات

اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10

mcp-echarts + filesystem

اقرأ ملف CSV، واستخرج الأعمدة، ورسم مخططًا لها

اقرأ data/sales.csv، ورسم عمود "الإيرادات" حسب "المنطقة" كمخطط شريطي.✓ تم النسخ
mcp-echarts + bigquery-server

قم بتشغيل SQL ثم قم بتخطيط النتيجة

الاستعلام عن آخر 30 يومًا من الاشتراكات من BigQuery؛ مؤامرة التهم اليومية كخط.✓ تم النسخ
mcp-echarts + antv-chart

اختر بين ECharts وAntV حسب حالة الاستخدام

بالنسبة إلى لوحة معلومات الجمهور الصيني، تفضل الرسوم البيانية الإلكترونية؛ للحصول على حبر البيانات، الحد الأدنى من اختيار AntV.✓ تم النسخ

الأدوات

ما يوفره هذا الـ MCP

الأداةالمدخلاتمتى تستدعيهاالتكلفة
generate_line_chart xAxis: array, series: array<number[]>, title?: str الاتجاه على محور مرتب (الوقت، الموقع) 0
generate_bar_chart categories, values, stack?: bool قارن الفئات المنفصلة 0
generate_pie_chart items: [{name, value}] حصة الإجمالي مع ≥8 شرائح 0
generate_scatter_chart points: [[x,y]] الارتباط أو تصورات التجميع 0
generate_heatmap matrix: number[][], rows, cols مصفوفات الكثافة أو الارتباك 0
generate_sankey nodes, links التدفق/القمع بين الحالات المنفصلة 0
generate_echarts_option free-form option object عندما تريد بناء جملة ECharts بالكامل، وليس مخططًا مقولبًا 0

التكلفة والحدود

تكلفة التشغيل

حصة API
لا شيء - تقديم محلي
الرموز لكل استدعاء
صغير: كائن الخيار في، مسار الخروج
التكلفة المالية
حر
نصيحة
اسأل عن الخيار JSON عندما ستعيد استخدامه عدة مرات؛ اطلب PNG للأسهم لمرة واحدة.

الأمان

الصلاحيات والأسرار ونطاق الأثر

تخزين بيانات الاعتماد: اعتمادات MinIO في env vars فقط. لا يوجد تخزين لبياناتك من جانب الخادم خارج المخطط المعروض.
نقل البيانات الخارجي: لا يوجد خروج افتراضيا. يقوم MinIO بتصدير التحميلات إلى نقطة النهاية التي تم تكوينها فقط.

استكشاف الأخطاء

الأخطاء الشائعة وحلولها

عرض PNG فارغ

تأكد من تطابق أنواع بيانات السلسلة (الأرقام، وليس السلاسل) وأن طول المحور السيني يساوي طول السلسلة.

تحقق: Inspect the option JSON; types should be number arrays
فشل تحميل MiniIO: التوقيع غير متطابق

تحقق من MINIO_USE_SSL وMINIO_PORT وأن مفاتيح الوصول/السرية تنتمي إلى نفس مثيل MinIO.

تحقق: mc admin info myminio/
الخطوط مفقودة / أحرف CJK كمربعات

قم بتثبيت خط قادر على CJK في البيئة التي تقوم بتشغيل خادم MCP (على سبيل المثال، Noto Sans CJK).

تحقق: fc-list | grep -i cjk

البدائل

MCP ECharts مقابل البدائل

البديلمتى تستخدمهاالمقايضة
antv-chartأنت تفضل إعدادات AntV الافتراضية والمستندات الصينيةمفردات الرسم البياني أصغر
markmap-mcp-serverأنت بحاجة إلى تسلسل هرمي، وليس مخططات إحصائيةفئة الإخراج مختلفة
mermaid-skillأنت بحاجة إلى مخططات انسيابية/مخططات تسلسلية، وليس مخططات بياناتالرسوم البيانية ≠ الرسوم البيانية

المزيد

الموارد

📖 اقرأ ملف README الرسمي على GitHub

🐙 تصفح القضايا المفتوحة

🔍 تصفح أكثر من 400 خادم MCP و Skills