网页设计专业好找工作吗_农产品十大交易平台_温州seo教程_周口seo推广

前言

有这样一个需求，提供数据生成折线图，之前尝试过 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 即可