文章目录
- 前言
- echarts-export-server
- docker 镜像
- docker-compose.yml
- 使用
- 请求参数
- SHELL-POST 请求
- APIfox
- 测试2
- echarts 配置
前言
有这样一个需求,提供数据生成折线图,之前尝试过 jfree
虽然是生成了但是很丑而且不太好用,估寻求其他方案,目前找到的比较合适也比较简单的是 通过 echarts-export-server
请求然后导出成图片,虽然加了一层应用,但是相对来说是最简单和实现的一种了…
echarts-export-server
这是一项基于 Node.js 的服务,使用 Node Canvas 将 Apache ECharts 图表渲染成图片(PNG、JPG、SVG、PDF 和 Base64)并发送回给用户。
https://github.com/xiaomaigou/echarts-export-server
docker 镜像
https://github.com/xiaomaigou/echarts-export-server/issues/1
docker-compose.yml
我习惯用docker-compose 进行管理
services:echarts-export-server:image: kangaroo1122-docker.pkg.coding.net/project/public/echarts-export-server:1.0.1container_name: echarts-export-serverports:- "3000:3000" # 将宿主机的 3000 端口映射到容器的 3000 端口restart: always
那个大佬 已经有更小的镜像了… 总共才几十MB 把…
使用
请求参数
- type 类型
SHELL-POST 请求
直接在命令行进行测试即可,我这边是能生成的
# Generate a chart and save it to chart.png
curl -H "Content-Type: application/json" \
-X POST localhost:3000 \
-o chart.png \
-d '{"type": "png","width": 600,"height": 400,"base64": false,"download": false,"option": {"backgroundColor": "#fff","animation": false,"xAxis": {"type": "category","data": ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]},"yAxis": {"type": "value"},"series": [{"data": [820,932,901,934,1290,1330,1720],"type": "line","label": {"show": true}}]}
}'
生成的图片
结果图
APIfox
剩下的只需要转换成java 代码即可
测试2
{"type": "png","width": 600,"height": 400,"base64": false,"download": false,"option": {"backgroundColor": "#fff","title": {"left": "center","text": "XXX趋势图"},"xAxis": {"type": "category","data": ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]},"yAxis": [{"name": "Flow(m³/s)","type": "value"},{"type": "value"}],"series": [{"data": [820,932,901,934,1290,1330,1320],"type": "line","smooth": true,"markLine": {"data": [{"yAxis": 1330,"name": "最大值:1330","lineStyle": {"type": "dashed","color": "#2d0ab1"},"label": {"show": true,"position": "insideEndTop","distance": 10}},{"yAxis": 820,"name": "最小值:820","lineStyle": {"type": "dashed","color": "#ff0000"},"label": {"show": true,"position": "insideEndBottom","distance": 10}}]}}]}
}
echarts 配置
https://echarts.apache.org/examples/zh/index.html#chart-type-scatter
直接去配置,然后找到合适的将JS配置项转换成JSON 即可