几十万数据的场景下，vchart 柱状图如何渲染？

[webiamcome]

场景： bi 报表页面最大需要支持 20 张卡片，卡片类型为柱状图，每个卡片3000条数据，5个维度。展平后的数据量最大可达到 20 3000 5 = 30w 条。 渲染数据直接导致页面崩溃，请问如何优化？

[xile611]

@webiamcome 每个卡片的数据不是分开的吗？ 为什么会有 20 3000 5? 卡片做了lazy render 吗？

[webiamcome]

@webiamcome 每个卡片的数据不是分开的吗？ 为什么会有 20 3000 5? 卡片做了lazy render 吗？

单个卡片 3000 * 5 也有点卡 demo地址： https://codesandbox.io/p/sandbox/vchart-theme-forked-x7sygc?file=%2Fsrc%2Fcharts%2Fbar.ts%3A8%2C54

[webiamcome]

请问字节火山引擎是用的该图形库吗？我们bi系统的功能和火山引擎有点类似 https://www.volcengine.com/docs/4726/1144118

[xile611]

https://codesandbox.io/p/sandbox/vchart-theme-forked-x7sygc?file=%2Fsrc%2Fcharts%2Fbar.ts%3A8%2C54

字节火山引擎 是引用的 vchart

[xile611]

https://codesandbox.io/p/sandbox/vchart-theme-forked-x7sygc?file=%2Fsrc%2Fcharts%2Fbar.ts%3A8%2C54

访问不了哦

[webiamcome]

https://codesandbox.io/p/sandbox/vchart-theme-forked-x7sygc?file=%2Fsrc%2Fcharts%2Fbar.ts%3A8%2C54

访问不了哦

https://codesandbox.io/p/sandbox/vchart-theme-forked-x7sygc?file=%2Fsrc%2Fcharts%2Fbar.ts 当时是草稿状态，现在应该好了，再试一下

[xile611]

@webiamcome 你这个datazoom的场景，数据量非常大的时候建议

1. Datazoom的 filterMode 设置为 filter ，这样不会一直全量渲染数据
2. Datazoom 可以配置tolerance 设置Datazoom背景图的数据采样率，优化性能，比如 tolerance: 0.01
3. 数据量较大的时候，可以开启渐进渲染：

progressiveStep: 100,
progressiveThreshold: 2000,