apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.63k stars 19.61k forks source link

[Bug] 大数据散点图缩放问题和brush时渲染问题 #17526

Open RizerKayseri opened 2 years ago

RizerKayseri commented 2 years ago

Version

5.3.3

Link to Minimal Reproduction

No response

Steps to Reproduce

let Lorenz_chart_option = { title: { text: 'Lorenz', left: 10 }, toolbox: { feature: { dataZoom: { yAxisIndex: false }, saveAsImage: { pixelRatio: 2 } } }, tooltip: { trigger: 'item', axisPointer: { type: 'cross', snap: false }, formatter: '{c0}' }, brush: { toolbox: ['polygon', 'keep', 'clear'], xAxisIndex: 'all', brushLink: 'all', throttleType: 'debounce', throttleDelay: 100, outOfBrush: { color: 'rgb(0, 0, 255)' }, transformable: false }, grid: { bottom: 90 }, dataZoom: [{ type: 'inside', // 放大和缩小 }, { type: 'slider', showDataShadow: false, }, { type: 'slider', yAxisIndex: 0, showDataShadow: false, }], xAxis: [{ name: '(ms)', // silent: false, // splitLine: { // show: false // }, // splitArea: { // show: false // }, // boundaryGap: false }], yAxis: [{ name: '(ms)', // splitArea: { // show: false // }, // splitLine: { // show: false // }, // max: function (value) { // return value.max + 10 // }

}],
animation: false,
series: [
    {
        type: 'scatter',
        symbolSize: 2,
        data: this.state.diff,
        // Set `large` for large data amount
        large: true,
    }
],
color: ['rgb(0, 0, 255)']

} 我使用如上的配置生成散点图,其中this.state.diff是一个长度18225的坐标对

Current Behavior

问题1:我并没有同时使用x轴与y轴的内置缩放,因为我发现当缩放放大到一定程度时,坐标轴将会突然的大偏移,例如我以坐标轴为中心点进行缩放,中心点会突然偏移到原位置上方,会导致我无法找到想要放大的部分。 问题2:我发现大数据散点图在数据渲染上存在一些bug,当我试图在大数据散点图上使用brush时,图层会进行不完全的重新渲染,即渲染到一半就会中断,导致无法获取到brush范围的dataIndex,观感也极差。放弃使用series.large能规避这个问题,但渲染过于卡顿,不能接收。 上述两个问题都在官方例子——大规模星云散点图中能够得到复刻。 问题3:较大规模数据进行柱状图绘制后,未经缩放,点击柱形图,其onClick事件无法获取到正确的dataIndex,获取到的dataIndex有大概率为0,我只能通过echartsInstance.getZr()获取到像素坐标值后进行转换。 问题4:形如[0,0,1,0,0,0......]的数据进行柱状图绘制后,未经缩放,点击柱形图,其onClick事件获取到正确的dataIndex,即便设置了空白区域不能响应,获取到的dataIndex依旧存在偏差值,我需要手动校准

Expected Behavior

最希望能够解决散点图渲染不正确的问题

Environment

- OS:windows11
- Browser:Firefox 97.0(64)
- Framework:react@16.8.6

Any additional comments?

No response

echarts-bot[bot] commented 2 years ago

@RizerKayseri It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED
**TITLE** [Bug] Big data scatterplot scaling issues and blups rendering issues
wuhemei commented 1 year ago

大数据热力图同样存在问题2中提到的问题,刷选或是缩放的过程中图表会重现刷新

LazyJoke commented 1 year ago

同上

RizerKayseri commented 1 year ago

大数据热力图同样存在问题2中提到的问题,刷选或是缩放的过程中图表会重现刷新

可以在刷取动作事件里手动触发刷新 会好一点

RizerKayseri commented 1 year ago

同上

可以在刷取动作事件里手动触发刷新 会好一点

soleflora commented 1 month ago

同上

可以在刷取动作事件里手动触发刷新 会好一点

请问怎么刷新的呢,我尝试通过 resize重新绘制,但是brush刷选框会被新绘制的图层盖住

wuhemei commented 1 month ago

这是来自QQ邮箱的假期自动回复邮件。   您好,我最近正在休假中,无法亲自回复您的邮件。我将在假期结束后,尽快给您回复。

RizerKayseri commented 1 month ago

同上

可以在刷取动作事件里手动触发刷新 会好一点

请问怎么刷新的呢,我尝试通过 resize重新绘制,但是brush刷选框会被新绘制的图层盖住

我是通过在brush事件中dataZoom缩放触发的刷新,获取到当前缩放比例,dispatchAction一个dataZoom事件。另外我发现我当时没用它自带的刷选获取值,而是单独写了一个引射线法根据坐标算的值。