apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.15k stars 19.6k forks source link

[Bug] fill-opacity bug using getDataURL and getConnectedDataURL with svg renderer #20285

Open AidMen opened 3 weeks ago

AidMen commented 3 weeks ago

Version

5.5.1

Link to Minimal Reproduction

https://jsfiddle.net/AidMen/fcx20wo1/32/

Steps to Reproduce

  1. Chart is created via vanilla js and Apache ECharts (see also JSFiddle).

  2. This is the option object:

    const option= {
    title: {
    text: 'Waterfall Chart',
    subtext: 'Living Expenses in Shenzhen'
    },
    tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: function (params) {
      var tar = params[1];
      return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
    }
    },
    toolbox: {
    show: true,
      feature: {
          saveAsImage: {
              name: 'saved_via_toolbox'
          }
      }
    },
    grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
    },
    xAxis: {
    type: 'category',
    splitLine: { show: false },
    data: ['Total', 'Rent', 'Utilities', 'Transportation', 'Meals', 'Other']
    },
    yAxis: {
    type: 'value'
    },
    series: [
    {
      name: 'Placeholder',
      type: 'bar',
      stack: 'Total',
      itemStyle: {
        borderColor: 'transparent',
        color: 'transparent'
      },
      emphasis: {
        itemStyle: {
          borderColor: 'transparent',
          color: 'transparent'
        }
      },
      data: [0, 1700, 1400, 1200, 300, 0]
    },
    {
      name: 'Life Cost',
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        position: 'inside'
      },
      data: [2900, 1200, 300, 200, 900, 300]
    }
    ]
    };
  3. On the provided JSFiddle try saving the image via the custom buttons (1. and 2. seen in the screenshot) and you will get the chart saved as svg but the labels on the bar elements have a fill-opacity="0" compared to using the button from the toolbox which doesn't create this fill-opacity. Screenshot jsfiddle 2024-08-23

  4. The result of saving via getDataUrl can be seen here: Screenshot saved_via_getDataURL 2024-08-23

The result of saving via toolbox can be seen here: Screenshot saved_via_toolbox 2024-08-23

Current Behavior

I want to save the chart as svg using my custom buttons which use getDataURL and getConnectedDataURL respectively but both produce a fill-opacity="0" on the labels of the bar elements.

Expected Behavior

The buttons should produce the same result as using the saveImageAs feature from the toolbox or at least no fill-opacity="0" on said elements.

Environment

- OS: Windows 11 Enterprise
- Browser: Edge 127.0.2651.105
- Framework: -

- OS: Linux CentOS 9
- Browser: Chrome 125.0.6422.60
- Framework: -

Any additional comments?

No response

AidMen commented 3 weeks ago

Possible fix: Calling getDataURL after the chartInstance "rendered" event could be a possible fix: JSFiddle

Could you please elaborate what is the correct behaviour?