服务端生成echarts、highcharts的图片，返回base64，由nodejs提供服务

最新推荐文章于 2025-03-30 08:14:16 发布

原创最新推荐文章于 2025-03-30 08:14:16 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#服务端渲染图片 #echarts #highcharts #nodejs #puppeteer

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

java

3 篇文章

订阅专栏

该项目使用nodejs和puppeteer实现服务端生成Echarts及HighCharts图表，通过Express提供接口，返回图片的base64编码。后台可以调用这些接口，以本地或网络请求方式获取图片。

chart-server

introduction

由于项目要用到服务器生成图片的功能，但是由于后台图表的依赖库所能渲染的样式有限，故选择了业界最广泛使用的Echarts与HighCharts作为服务端渲染图片的库。使用了puppeteer作为headless浏览器来渲染图片，返回生成图片的 base64码。该功能需要使用nodejs来运行express服务，服务成功运行之后，可在java端或其他后台中通过本地（localhost）或者网络请求的方式，通过服务来得到base64码。

运行

yarn install
node server.js

接口

echarts

request

POST (application/json)

{
	"width":700,
	"height":600,
	"options":{
        "title": {
            "text": "ECharts 入门示例"
        },
        "tooltip": {},
        "legend": {
            "data":["销量"]
        },
        "xAxis": {
            "data": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        "yAxis": {},
        "series": [{
            "name": "销量",
            "type": "bar",
            "data": [5, 20, 36, 10, 10, 20]
        }]
    }
}

response

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArwAAAJYCAYAAACAbzXXAAAgAElEQVR4Xu3dDZhkV10n/nOqeyYZJC8iCCIoTIILAZLputUZAhLjoiCKgGA0oiK......太长省略了

HighCharts

request

POST (application/json)

{
	"width":700,
	"height":600,
	"options":{
        "chart": {
            "type": "bar"                       
        },
        "title": {
            "text": "我的第一个图表"                 
        },
        "xAxis": {
            "categories": ["苹果", "香蕉", "橙子"]   
        },
        "yAxis": {
            "title": {
                "text": "吃水果个数"                
            }
        },
        "series": [{                              
            "name": "小明",                       
            "data": [1, 0, 4]                     
        }, {
            "name": "小红",
            "data": [5, 7, 3]
        }]
    }
}

response

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAGQCAYAAAByNR6YAAAgAElEQVR4Xu2dCbxN5frHn2OKiFMRUkjmMt/...........

源码：link. 谢谢点赞！～