[Bug] Stacked Area Chart draw the area even though the value is 0.

[jihea-park]

Version

6.0.0

Link to Minimal Reproduction

https://codesandbox.io/p/devbox/stacked-area-chart-forked-j5hqr7?workspaceId=ws_VRxsFnabkcLYpQFZFy1rGS

Steps to Reproduce

Current Behavior

Between "Tue" and "Wed," all values ​​except Email are 0. However, the 0 values ​​are plotted and colored on the graph.

Expected Behavior

If the value is 0, it should not be stacked on the graph.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[Ovilia]

Can you copy the option of this case? I can't open the above codesandbox link. Thanks

[jihea-park]

@Ovilia

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});
var app = {};


var option;

const seriesOption = {
  type: 'line',
      stack: 'total',
      showSymbol: false,
      label: {
        show: true,
        position: 'top'
      },
      lineStyle: {
        width: 0,
      },
      smooth: false,
      step: 'middle',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
}

option = {
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
     ...seriesOption,
      data: [124, 121, 120, 189, 148, 137, 534, 360, 159, 120, 163, 120, 122, 127, 119, 527, 1458, 794, 377, 260, 194]
    },
    {
      name: 'Union Ads',
      ...seriesOption,
      data: [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    },
    {
      name: 'Video Ads',
      ...seriesOption,
      data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 0, 0]
    },
    {
      name: 'Direct',
      ...seriesOption,
      data: [0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    },
    {
      name: 'Search Engine',
     ...seriesOption,
      data: [0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 2, 1, 0, 0]
    }
  ]
};

if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

[Ovilia]

This doesn't seem to be a bug to me. If you don't want there to be a data, you should use '-' instead of 0.

[jihea-park]

@Ovilia

Here is a similar issue report: #16739
In my opinion, if it is 0, it should not be represented in the graph.

Even though I set

lineStyle: {
        width: 0,
      },

You can see the area for 0 data.