[Bug] 面积图在某些配置下覆盖不全

zLsPitaya commented 2 weeks ago

Version

1.11.3

Link to Minimal Reproduction

https://jsfiddle.net/ys47dupx/2/

Steps to Reproduce

可以直接看到面积图覆盖不全的问题

Current Behavior

配置面积图时，偶尔发生面积覆盖不全的情况

Expected Behavior

面积覆盖正常

Environment

- OS: macOS Sonoma 14.4
- Browser: Chrome 125.0.6422.142
- Framework:

Any additional comments?

代码如下： const spec = { type: 'area', "xField": "status", "yField": "excute", "seriesField": "year", "data": { "values": [ { "excute": 3513, "status": 0, "year": 2020 }, { "excute": 592904, "status": 0, "year": 2021 }, { "excute": 250570, "status": 0, "year": 2022 }, { "excute": 12073, "status": 0, "year": 2023 }, { "excute": 631, "status": 1, "year": 2020 }, { "excute": 169235, "status": 1, "year": 2021 }, { "excute": 85392, "status": 1, "year": 2022 }, { "excute": 572, "status": 1, "year": 2023 }, { "excute": 1, "status": 2, "year": 2023 }, { "excute": 5004, "status": 4, "year": 2021 }, { "excute": 3, "status": 6, "year": 2022 }, { "excute": 2, "status": 6, "year": 2023 } ] }, legends: [{ visible: true, position: 'middle', orient: 'bottom' }] };

const vchart = new VChart(spec, { dom: CONTAINER_ID }); vchart.renderSync();

xile611 commented 2 weeks ago

@zLsPitaya 面积图默认是堆积的效果，但是你这个数据存在两个问题：

数据未排序（为了性能的考虑，vchart内部不会默认排序，需要排序可以手动配置）

{
type: 'area',
xField: 'status',
yField: 'excute',
seriesField: 'year',
data: {
values: [
  {
    excute: 3513,
    status: 0,
    year: 2020
  },
  {
    excute: 592904,
    status: 0,
    year: 2021
  },
  {
    excute: 250570,
    status: 0,
    year: 2022
  },
  {
    excute: 12073,
    status: 0,
    year: 2023
  },
  {
    excute: 631,
    status: 1,
    year: 2020
  },
  {
    excute: 169235,
    status: 1,
    year: 2021
  },
  {
    excute: 85392,
    status: 1,
    year: 2022
  },
  {
    excute: 572,
    status: 1,
    year: 2023
  },
  {
    excute: 1,
    status: 2,
    year: 2023
  },
  {
    excute: 5004,
    status: 4,
    year: 2021
  },
  {
    excute: 3,
    status: 6,
    year: 2022
  },
  {
    excute: 2,
    status: 6,
    year: 2023
  }
],
fields: {
  status: {
    type: 'linear',
    sortIndex: 0
  },

  year: {
    type: 'linear',
    sortIndex: 1
  }
}
},
legends: [{ visible: true, position: 'middle', orient: 'bottom' }]
}

数据点缺失， status = 2 这个点，只有2023这个分类下才有数据数据点补齐这块的话，VChart内部默认也不会做的需要外部自己根据业务处理一下

zLsPitaya commented 2 weeks ago

了解了，跟后端的同学沟通把缺失的数据补全后，图表正常展示了，感谢～

VisActor / VChart