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

2skhul33  于 3个月前  发布在  Echarts
关注(0)|答案(1)|浏览(72)

Version

5.5.1

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]
    }
  ]
};
  1. 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.

  1. The result of saving via getDataUrl can be seen here:

The result of saving via toolbox can be seen here:

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

uinbv5nw

uinbv5nw1#

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

Could you please elaborate what is the correct behaviour?

相关问题