apache / apache/echarts

[Bug] echarts 在node:16.17.0 docker 镜像下通过node canvas生成图片背景颜色出错

Open
#17,623 5 comments 0 reactions 0 assignees View on GitHub
bug pending stale
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.3.3

### Link to Minimal Reproduction

_No response_

### Steps to Reproduce

镜像需要安装字体

```bash
RUN apt-get -y update \
&& apt-get -y install ttf-wqy-zenhei fonts-wqy-microhei
```
下面是复现demo
```js
var echarts = require('echarts');
const { createCanvas } = require('canvas');

const canvas = createCanvas(800, 600);
// ECharts 可以直接使用 node-canvas 创建的 Canvas 实例作为容器
const chart = echarts.init(canvas);

// 像正常使用一样 setOption
chart.setOption({
title: {
show: true,
text: '复现测试,这里会变成黑色的背景',
left: 'center',
top: 'center',
fontSize: 30,
},
tooltip: {
trigger: 'item',
},
legend: {
width: 30,
icon: 'circle',
},
series: [
{
// name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
label: {
show: false,
},
labelLine: {
show: false,
},
data: [],
},
],
});

// 通过 Response 输出 PNG 图片
res.writeHead(200, {
'Content-Type': 'image/png'
});
res.write(renderChart().toBuffer('image/png'));
res.end();

### Current Behavior

echatrs 默认背景为透明,但是实际生成的背景却变成黑色

### Expected Behavior

期待生成的背景为透明的背景

### Environment

```markdown
- OS: node:16.17.0
- Browser: node- canvas
- Framework:
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by running the provided node:16.17.0 Docker reproduction with node-canvas, focusing on echarts.init(canvas), setOption, and renderChart().toBuffer('image/png'). Compare the generated PNG with the expected transparent background and trace the server-side canvas rendering path. Done means the same reproduction produces a PNG whose default chart background remains transparent.

Written by the indexing model from the issue text.

Assessment

Tech stack
node.js, typescript
Domain
backend, data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.