# chart_server_demo

**Repository Path**: fzfbc/chart_server_demo

## Basic Information

- **Project Name**: chart_server_demo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-25
- **Last Updated**: 2021-09-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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/...........
```

## 常见问题
- Q:echarts 只有表，但是数据没有显示是为什么
    A:把series中的animation设置为false