MCP ECharts MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

ECharts 제품군을 다루는 15개 이상의 차트 도구
전체 ECharts 구문 지원 — 에이전트는 모든 시리즈 옵션을 사용할 수 있습니다.
PNG, SVG 또는 원시 옵션 JSON 내보내기
클라우드 종속성 없음 — 로컬로 렌더링
공유하기 쉬운 URL을 위한 선택적 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는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "mcp-echarts": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-echarts"
      ]
    }
  }
}

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "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

한 번의 도구 호출로 숫자 표를 차트로 변환

👤 채팅으로 작업하는 분석가, PM, 엔지니어 ⏱ ~5 min beginner

언제 쓸까: 작은 데이터 세트가 있고 스프레드시트를 열지 않고 시각적 개체를 원합니다.

사전 조건

노드 18+ — nvm 설치 18

흐름

차트 설명

주간 활성 사용자의 막대 차트: 월 820시, 화요일 905시, 수요일 1120시, 목요일 980시, 금요일 1340시, 토요일 780시, 일 610시. 제목을 '요일별 WAU'로 지정합니다.✓ 복사됨

→ 에이전트는 올바른 x축 라벨과 값을 사용하여 generate_bar_chart를 선택합니다.
PNG 내보내기

PNG로 내보내고 ~/charts/wau.png에 저장합니다.✓ 복사됨

→ 파일이 반환되었습니다. 도구 결과의 png_path

결과: 채팅을 종료하지 않고도 덱이나 문서에 넣을 수 있는 차트입니다.

함정

30개 이상의 카테고리가 있는 데이터 세트에 대한 원형 차트 요청 — 대신 상담원은 막대/히트맵을 제안해야 합니다. '막대 차트 사용, 파이를 읽을 수 없음'으로 강제 실행

함께 쓰기: filesystem

React/Vue 대시보드에 붙여넣을 수 있는 원시 ECharts 옵션을 가져옵니다.

👤 내부 툴링을 구축하는 프런트엔드 개발자 ⏱ ~15 min intermediate

언제 쓸까: Claude가 차트 구성 초안을 작성하여 앱에서만 조정할 수 있기를 원합니다.

사전 조건

ECharts를 사용하는 프런트엔드 — npm echarts 설치

흐름

옵션 JSON 요청

2025년에 대해 매월 3개 시리즈(직접, 유기, 유료)의 누적 영역형 차트에 대한 ECharts 옵션을 생성합니다.✓ 복사됨

→ 반환 모양은 series[].type:'line', AreaStyle 및 stack:'total'을 포함하는 옵션 개체입니다.
구성요소에 드롭

이제 이를 importOption이라는 TypeScript const로 내보냅니다.✓ 복사됨

→ TS const 붙여넣기 준비 완료

결과: 상용구를 직접 제작하지 않고도 생산 준비가 완료된 ECharts 구성입니다.

함정

옵션을 원할 때 상담원이 PNG를 반환함 — '반환 옵션 JSON만 해당 - 렌더링 없음'이라고 말하세요.

함께 쓰기: antv-chart

흐름(퍼널, 여정, 전환)을 Sankey로 시각화

👤 성장/제품 분석가 ⏱ ~10 min beginner

언제 쓸까: 데크에 대한 흐름도가 필요하며 Sankey가 적합한 도구입니다.

흐름

노드 및 흐름 설명

Sankey: 랜딩(1000) → 가입(420) → 활성화(310) → 유료(95). 이탈률을 표시합니다.✓ 복사됨

→ 올바른 노드/링크 구조; 라벨에는 개수가 포함됩니다.
SVG 내보내기

Keynote에서 크기가 조정되도록 SVG를 내보냅니다.✓ 복사됨

→ SVG 경로가 저장되었습니다.

결과: Figma 없이 깔때기 검토를 위한 선명한 Sankey입니다.

함께 쓰기: markmap-mcp-server

공유를 위해 생성된 차트를 MinIO에 게시

👤 자체 호스팅 객체 저장소를 운영하는 팀 ⏱ ~20 min intermediate

언제 쓸까: Slack/Notion에서 참조할 차트에 대해 재현 가능한 URL을 원합니다.

사전 조건

MinIO 엔드포인트 + 자격 증명 — MCP 클라이언트 구성에서 MINIO_* 환경 변수를 프로비저닝합니다.

흐름

환경 구성

MCP 구성에서 MINIO_ENDPOINT, MINIO_ACCESS_KEY, MINIO_SECRET_KEY, MINIO_BUCKET_NAME을 설정합니다.✓ 복사됨

→ 서버는 시작 시 MinIO가 활성화되었다고 보고합니다.
생성 및 업로드

지역별 수익을 차트로 표시합니다. MinIO에 업로드하고 URL을 알려주세요.✓ 복사됨

→ 공개(또는 미리 서명된) URL이 반환됨

결과: 채팅 롤 후에도 깨지지 않는 차트에 대한 안정적인 링크입니다.

함정

구성에서 자격 증명 유출 — MinIO 루트 키가 아닌 전용 버킷 범위 IAM 사용자를 사용하십시오.

함께 쓰기: s3-like MCPs

조합

다른 MCP와 조합해 10배 효율

mcp-echarts + filesystem

CSV 읽기, 열 추출, 차트 작성

data/sales.csv를 읽고 '지역'별로 '수익' 열을 막대 차트로 표시합니다.✓ 복사됨

mcp-echarts + bigquery-server

SQL을 실행한 후 결과를 차트로 작성

BigQuery에서 지난 30일간의 가입을 쿼리합니다. 플롯은 매일 한 줄로 계산됩니다.✓ 복사됨

mcp-echarts + antv-chart

사용 사례별로 ECharts와 AntV 중에서 선택하세요.

중국 대상 대시보드의 경우 ECharts를 선호합니다. 데이터 잉크 최소 선택 AntV의 경우.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출
generate_line_chart	xAxis: array, series: array<number[]>, title?: str	정렬된 축(시간, 위치)에 대한 추세
generate_bar_chart	categories, values, stack?: bool	개별 카테고리 비교
generate_pie_chart	items: [{name, value}]	조각이 8개 이하인 전체 지분
generate_scatter_chart	points: [[x,y]]	상관관계 또는 클러스터링 시각화
generate_heatmap	matrix: number[][], rows, cols	밀도 또는 혼동 행렬
generate_sankey	nodes, links	개별 상태 간의 흐름/깔때기
generate_echarts_option	free-form option object	템플릿 차트가 아닌 전체 ECharts 구문을 원하는 경우

비용 및 제한

운영 비용

API 쿼터: 없음 — 로컬 렌더링
호출당 토큰: 소형: 옵션 개체 입력, 경로 출력
금액: 무료
팁: 여러 번 재사용하려면 JSON 옵션을 요청하세요. 일회성 공유를 위해 PNG를 요청하세요.

보안

권한, 시크릿, 파급범위

자격 증명 저장: 환경 변수에만 MinIO 자격 증명이 있습니다. 렌더링된 차트 이외의 데이터는 서버측에 저장되지 않습니다.

데이터 외부 송신: 기본적으로 송신이 없습니다. MinIO 내보내기는 구성된 엔드포인트에만 업로드됩니다.

차트 이미지에는 민감한 데이터가 포함될 수 있습니다. 공유 MinIO 버킷에 게시하기 전에 검토하세요.

문제 해결

자주 발생하는 오류와 해결

PNG 렌더링이 비어 있습니다.

계열 데이터 유형이 일치하는지(문자열이 아닌 숫자), x축 길이가 계열 길이와 같은지 확인하세요.

확인: Inspect the option JSON; types should be number arrays

MinIO 업로드 실패: 서명 불일치

MINIO_USE_SSL, MINIO_PORT를 확인하고 액세스/비밀 키가 동일한 MinIO 인스턴스에 속하는지 확인하세요.

확인: mc admin info myminio/

글꼴 누락/CJK 문자가 상자로 표시됨

MCP 서버를 실행하는 환경(예: Noto Sans CJK)에 CJK 지원 글꼴을 설치합니다.

확인: fc-list | grep -i cjk

대안

MCP ECharts 다른 것과 비교

대안	언제 쓰나	단점/장점
antv-chart	AntV의 독창적인 기본값과 중국어 문서를 선호합니다.	더 작은 차트 어휘
markmap-mcp-server	통계 차트가 아닌 계층 구조가 필요합니다	다른 출력 클래스
mermaid-skill	데이터 차트가 아닌 흐름도/시퀀스 다이어그램이 필요합니다.	다이어그램 ≠ 차트

MCP ECharts

왜 쓰나요

핵심 기능

라이브 데모

실제 사용 모습

설치

클라이언트 선택

사용 사례

실전 활용법: MCP ECharts

한 번의 도구 호출로 숫자 표를 차트로 변환

사전 조건

흐름

함정

React/Vue 대시보드에 붙여넣을 수 있는 원시 ECharts 옵션을 가져옵니다.

사전 조건

흐름

함정

흐름(퍼널, 여정, 전환)을 Sankey로 시각화

흐름

공유를 위해 생성된 차트를 MinIO에 게시

사전 조건

흐름

함정

조합

다른 MCP와 조합해 10배 효율

도구

이 MCP가 노출하는 것

비용 및 제한

운영 비용

보안

권한, 시크릿, 파급범위

문제 해결

자주 발생하는 오류와 해결

대안

MCP ECharts 다른 것과 비교

더 보기

리소스