π ECharts MCP Server
δΈζζζ‘£ | English
A Model Context Protocol (MCP) server that generates beautiful chart images from ECharts configurations.
β¨ Features
- π¨ Generate high-quality chart images from ECharts configurations
- πΌοΈ Support for various chart types (bar, line, pie, scatter, etc.)
- π Customizable dimensions (width/height)
- π― Easy integration with AI assistants via MCP
βοΈ Configuration
.cursor/mcp.json
{
"mcpServers": {
"echarts-mcp": {
"command": "npx",
"args": ["echarts-mcp"],
}
}
}
π§ Local Development
If you want to run from source:
# Clone the repository
git clone https://github.com/w2xi/echarts-mcp.git
cd echarts-mcp
# Install dependencies
npm install
# Run the server
npm start
Then configure your MCP client:
{
"mcpServers": {
"echarts-mcp": {
"command": "node",
"args": ["/path/to/echarts-mcp/cli.js"],
"env": {}
}
}
}
π Usage
Once configured, you can use the MCP server in your AI assistant by requesting chart generation:
Example Prompts:
- "Generate a bar chart showing sales data for the last 6 months"
- "Create a pie chart displaying market share distribution"
- "Make a line chart with temperature data over time"
Tool Parameters:
width
: Chart width in pixels (e.g., 1000)height
: Chart height in pixels (e.g., 500)echarts
: ECharts configuration object as string
Example ECharts Configuration:
{
backgroundColor: '#fff',
title: {
text: 'Monthly Sales Data'
},
tooltip: {},
legend: {
data: ['Sales']
},
xAxis: {
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
yAxis: {},
series: [{
name: 'Sales',
type: 'bar',
data: [120, 200, 150, 80, 70, 110]
}]
}
π οΈ Development
Scripts
npm start
- Start the MCP servernpm test
- Run test chartsnpm run inspect
- Inspect the MCP server with debugging tools
Dependencies
- ECharts: Chart generation library
- Canvas: Server-side canvas rendering
- MCP SDK: Model Context Protocol implementation
- Zod: Schema validation
π€ Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
π License
MIT License
π Links
Made with β€οΈ by w2xi