echarts icon indicating copy to clipboard operation
echarts copied to clipboard

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

Open Cyberhan123 opened this issue 3 years ago • 1 comments

Version

5.3.3

Link to Minimal Reproduction

No response

Steps to Reproduce

镜像需要安装字体

RUN apt-get -y update \
&& apt-get -y install ttf-wqy-zenhei fonts-wqy-microhei

下面是复现demo

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

Cyberhan123 avatar Sep 06 '22 09:09 Cyberhan123

@Cyberhan123 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Bug] Echarts generated an error in the background color of the image through node canvas under node:16.17.0 docker image

BODY

Version

5.3.3

Link to Minimal Reproduction

No response

Steps to Reproduce

Mirroring requires fonts to be installed

RUN apt-get -y update \
&& apt-get -y install ttf-wqy-zenhei fonts-wqy-microhei

The following is the reproduction demo

var echarts = require('echarts');
const { createCanvas } = require('canvas');

const canvas = createCanvas(800, 600);
// ECharts can directly use the Canvas instance created by node-canvas as a container
const chart = echarts.init(canvas);

// as normal use setOption
chart.setOption({
  title: {
    show: true,
    text: 'Reproduce the test, this will become a black background',
    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: [],
    },
  ],
});

// Output PNG image through Response
res.writeHead(200, {
  'Content-Type': 'image/png'
});
res.write(renderChart().toBuffer('image/png'));
res.end();

### Current Behavior

The default background of echatrs is transparent, but the actual generated background turns black

### Expected Behavior

Expect the generated background to be a transparent background

### Environment

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

Any additional comments?

No response

echarts-bot[bot] avatar Sep 06 '22 09:09 echarts-bot[bot]

Have u solved this problem? I have the same problem:(

fufuuuu avatar Nov 24 '22 06:11 fufuuuu

Have u solved this problem? I have the same problem:(

需要设置颜色为白色

Cyberhan123 avatar Nov 24 '22 09:11 Cyberhan123