数据太多导致显示不出来

[zhanshancheng]

发现问题： 项目中需要用到图表工具画基金走势图、 测试环境当数据4000条 发现X轴Y轴坐标显示正确 走势图显示空白 当把数据减少到3000条 显示正确 复现步骤： 下载demo文件，使用折线图测试 随机生成数据 当数据达到3250条左右 显示空白

// import F2 from '@antv/my-f2'; // 按需引入 F2 模块 import F2 from '@antv/my-f2/lib/core'; require('@antv/f2/lib/geom/line'); require('@antv/f2/lib/scale/time-cat'); const Tooltip = require('@antv/f2/lib/plugin/tooltip'); const app = getApp();

let chart = null;

function dateStr(num) { let date = new Date(num 24 3600 * 1000); let year = date.getFullYear() + 100; let month = date.getMonth() + 1; month = month < 10 ? 0${month} : month let day = date.getDate(); day = day < 10 ? 0${day} : day return year + '-' + month + '-' + day }

function drawChart(canvas, width, height) { const data = Array.from({ length: 3250 }, (item, index) => { let obj = {} obj.date = dateStr(index + 1) obj.value = parseInt(Math.random() * 100) return obj }) chart = new F2.Chart({ el: canvas, width, height, plugins: Tooltip });

chart.source(data, { value: { max: 300, tickCount: 5, min: 0 }, date: { type: 'timeCat', range: [ 0, 1 ], tickCount: 3 } }); chart.tooltip({ showItemMarker: false, onShow(ev) { const { items } = ev; items[0].name = items[0].title; } }); chart.axis('date', { label(text, index, total) { const textCfg = {}; if (index === 0) { textCfg.textAlign = 'left'; } if (index === total - 1) { textCfg.textAlign = 'right'; } return textCfg; } }); chart.line() .position('date*value'); chart.render(); return chart; }

Page({ data: {}, onReady() { my.createSelectorQuery() .select('#line') .boundingClientRect() .exec((res) => { // 获取分辨率 const pixelRatio = my.getSystemInfoSync().pixelRatio; // 获取画布实际宽高 const canvasWidth = res[0].width; const canvasHeight = res[0].height; this.setData({ width: canvasWidth pixelRatio, height: canvasHeight pixelRatio }); const myCtx = my.createCanvasContext('line'); myCtx.scale(pixelRatio, pixelRatio); // 必要！按照设置的分辨率进行放大 const canvas = new F2.Renderer(myCtx); this.canvas = canvas; drawChart(canvas, res[0].width, res[0].height); }); }, touchStart(e) { if (this.canvas) { this.canvas.emitEvent('touchstart', [e]); } }, touchMove(e) { if (this.canvas) { this.canvas.emitEvent('touchmove', [e]); } }, touchEnd(e) { if (this.canvas) { this.canvas.emitEvent('touchend', [e]); } } });

[simaQ]

这个问题，目前看是小程序渲染的性能瓶颈...... 微信小程序同样可见。后续等 native 渲染正式上线，问题即可解决。