Echarts 3.1.7 Graph图在大量数据下响应迟钝

shiyeling commented 8 years ago

问题简述 (One-line summary)

我用echarts的graph图渲染了一个已经布局好的graph数据到canvas上，渲染过程大概需要四五秒钟，渲染完成后，zoom，拖动响应都超级慢，延迟在0.5秒左右。这个graph中节点数量为1500个，边的数量为12500条。

版本及环境 (Version & Environment)

ECharts 版本 (ECharts version): 3.1.7
浏览器类型和版本 (Browser version): Chrome 49.0.2623.110 m
操作系统类型和版本 (OS Version): Win 10 家庭版
重现步骤 (Steps to reproduce)

1. 2.

期望结果 (Expected behaviour)

总共2万不到的绘图元素应该不至于这么慢啊，

可能哪里有问题 (What went wrong)

这下面是chrome profiling 提供的函数执行时间数据 7341.1 ms15.19 % 7341.1 ms15.19 % echarts.es5.js:4692matrix.identity
4736.8 ms9.80 % 4736.8 ms9.80 % echarts.es5.js:4706matrix.copy
4326.2 ms8.95 % 24433.9 ms50.57 % echarts.es5.js:16459Storage.updateDisplayList

ECharts配置项 (ECharts option)

title: {
            text: '人物关系：社交网络',
            subtext: '数据来自SNAP',
            x: 'right',
            y: 'bottom'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} : {b}'
        },
        toolbox: {
            show: true,
            feature: {
                restore: {
                    show: true
                },
                magicType: {
                    show: true,
                    type: ['force', 'chord']
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        legend: {
            x: 'left',
            data: ['账号']
        },
        series: [{
            type: 'graph',
            name: "社交网络关注关系",
            ribbonType: false,
            categories: [{
                name: '人物'
            }],
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                        textStyle: {
                            color: '#333'
                        }
                    },
                    nodeStyle: {
                        brushType: 'both',
                        borderColor: 'rgba(255,215,0,0.4)',
                        borderWidth: 1
                    }
                },
                emphasis: {
                    label: {
                        show: false
                            // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                    },
                    nodeStyle: {
                        //r: 30
                    },
                    linkStyle: {}
                }
            },
            large: true,
            // layout: 'circular',
            minRadius: 15,
            roam: true,
            maxRadius: 25,
            linkSymbol: 'arrow',
            force: {
                edgeLength: 200,
                repulsion: 20,
                gravity: 0.01,
                layoutAnimation: true
            },
            animation: false,
            calculable: false,
            //preventOverlap: true,
            data: nodes,
            edges: links
        }]

其他信息 (Other comments)

pissang commented 8 years ago

不像散点图，Graph 还没有针对大规模的数据优化过，需要创建1w多的图形已经是很多了

shiyeling commented 8 years ago

@pissang Chrome Profile里给出的两个比较费时的函数都是在matrix transform里的，是不是意味着影响渲染速度的主要是在JS计算这块？如果我换一个渲染器比如你的qtek-2d会不会能够处理10w级的图形渲染？

pissang commented 8 years ago

10w 数据的优化主要会集中在对图形的 batch 上，就是通过一个或多个图形画上万条数据的线，散点图就是这么做的，如果不对大量图形做 batch，不光是 js 对图形 transform 的计算，还有包括占用大量堆内存造成的 GC 开销，频频调用 canvas 的 stroke 接口的开销等等因素都会造成绘制卡顿。

你现在的数据量最好的优化方式就是像大规模散点图一样批量画线段，这点我们后面会尝试对其做优化。

abel-jia commented 7 years ago

我也遇到类似问题，我节点数量3000多个，边数量700多个，使用的是引力布局。页面打开时节点的位置调整要好几分钟

qinxiaoyao commented 7 years ago

期待该问题的解决，目前碰到的项目中可能需要5K-1W个节点数，尝试过用GL版本，但是交互性差很多，期待你们尽快优化～～～

pissang commented 7 years ago

@qinxiaoyao 已经在最新代码中支持交互，下个版本就可以使用了

apache / echarts