作者：jessezhang007007 [email protected]
github地址：https://github.com/jessezhang007007/echarts-ssr-server
Docker Hub 地址：https://hub.docker.com/r/jessezhang007007/echarts-ssr-server/
Echarts server side render by node canvas, generate chart image by Echarts.
使用NodeJs服务器端渲染echarts图表，生成图片格式。
docker run -d -p 8081:8081 --name echarts-ssr-server --restart=always jessezhang007007/echarts-ssr-server
| 操作系统 | 安装命令 |
|---|---|
| OS X | brew install pkg-config cairo pango libpng jpeg giflib |
| Ubuntu | sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++ |
| Fedora | sudo yum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel |
| Solaris | pkgin install cairo pango pkg-config xproto renderproto kbproto xextproto |
| Windows | Instructions on our wiki |
git clone [email protected]:jessezhang007007/echarts-ssr-server.git
cd echarts-ssr-server
npm install
npm start{
"width": 800,
"height": 500,
"option": {
"backgroundColor": "#fff",
"xAxis": {
"type": "category",
"data": [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun"
]
},
"yAxis": {
"type": "value"
},
"series": [
{
"data": [
820,
932,
901,
934,
1290,
1330,
1320
],
"type": "line"
}
]
}
}参数JSON里的第一层属性说明：
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| width | Number | 600 | 图片宽度 |
| height | Number | 400 | 图片高度 |
| option | Object | {} | Echarts 的 Option 配置，参考Echarts文档 |
注意：GET方式只适合参数数据量小的情况，参数数据量大的时候请使用POST方式。
http://localhost:8081/?config=%7B%22width%22%3A800%2C%22height%22%3A500%2C%22option%22%3A%7B%22backgroundColor%22%3A%22%23fff%22%2C%22xAxis%22%3A%7B%22type%22%3A%22category%22%2C%22data%22%3A%5B%22Mon%22%2C%22Tue%22%2C%22Wed%22%2C%22Thu%22%2C%22Fri%22%2C%22Sat%22%2C%22Sun%22%5D%7D%2C%22yAxis%22%3A%7B%22type%22%3A%22value%22%7D%2C%22series%22%3A%5B%7B%22data%22%3A%5B820%2C932%2C901%2C934%2C1290%2C1330%2C1320%5D%2C%22type%22%3A%22line%22%7D%5D%7D%7D
curl -X POST \
http://localhost:8081/ \
-o echart-image.png \
-d '{
"width": 800,
"height": 500,
"option": {
"backgroundColor": "#fff",
"xAxis": {
"type": "category",
"data": [
"Mon",
"Tue",
"Wed",
"Thu",
"Fri",
"Sat",
"Sun"
]
},
"yAxis": {
"type": "value"
},
"series": [
{
"data": [
820,
932,
901,
934,
1290,
1330,
1320
],
"type": "line"
}
]
}
}'
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent