graphGL 应用在二维坐标系，关系图表显示不正常

[kosilence]

问题描述

我的应用场景是拥有大数据量的散点，需要按照时间顺序连线并且在二维坐标系内展示，仅仅使用 graph 模式，卡顿和加载时间无法接受，所以想要尝试使用 graphGL 来提高加载以及反应速度。

graph 模式下，显示正常，仅仅是卡顿问题 graphGL 模式下，散点可以显示，node 节点之间有关系连线，但是坐标系错乱，显示不正常

我的配置和截图

graph 模式下的配置

initEcharts: function() {
    var that = this;
    var optionTemplete = {
        title: {
            text: ''
        },
        tooltip : {
            trigger: 'axis',
            showDelay : 0,
            axisPointer:{
                show: true,
                type : 'cross',
                lineStyle: {
                    type : 'dashed',
                    width : 1
                }
            },
            zlevel: 1
        },
        legend: {
            data:[]
        },
        toolbox: {
            show : true,
            right: 30,
            feature : {
                mark : {show: true},
                dataZoom : {show: true},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        xAxis : [
            {
                type : 'value',
                scale:true
            }
        ],
        yAxis : [
            {
                type : 'value',
                scale:true
            }
        ],
        series : [
        ],
        animation: false
    };
    var chartContainer = document.getElementById('chartContainer');
    for(var x in this.chartsData) {
        // 基于准备好的dom，初始化echarts实例
        var chartDom = document.createElement("DIV");
        chartDom.className = 'chart-body';
        chartContainer.appendChild(chartDom);
        var chartModel = echarts.init(chartDom);
        var chartData = this.chartsData[x];

        var option = JSON.parse(JSON.stringify(optionTemplete));
        option.title.text = chartData.title;
        for(var i in chartData.curves) {
            var curve = chartData.curves[i];
            option.legend.data.push(curve.title);
            var curveSeries = {
                name: curve.title,
                type:'graph',
                coordinateSystem: 'cartesian2d',
                symbolSize: 2,
                animation: false,
                legendHoverLink: false,
                lineStyle: {
                    normal: {
                        color: 'source',
                        width: 2
                    }
                },
                nodes: (function () {
                    var nodes = [];
                    var len = curve.x.length;
                    for(var n=0; n<len; n++) {
                        var node = {
                            name: x + '-' + i + '-' + n,
                            value: [curve.x[n], curve.y[n]]
                        };
                        nodes.push(node);
                    }
                    return nodes;
                })(),
                links: (function () {
                    var links = [];
                    var len = curve.x.length;
                    for(var n=0; n<len-1; n++) {
                        var link = {
                            source: x + '-' + i + '-' + n,
                            target: x + '-' + i + '-' + (n + 1),
                        };
                        links.push(link);
                    }
                    return links;
                })()
            }
            option.series.push(curveSeries);
        }
        that.options.push(option);
        chartModel.setOption(option);
    }
}

graphGL 模式下的配置

initEcharts: function() {
    var that = this;
    var optionTemplete = {
        title: {
            text: ''
        },
        tooltip : {
            trigger: 'axis',
            showDelay : 0,
            axisPointer:{
                show: true,
                type : 'cross',
                lineStyle: {
                    type : 'dashed',
                    width : 1
                }
            },
            zlevel: 1
        },
        legend: {
            data:[]
        },
        toolbox: {
            show : true,
            right: 30,
            feature : {
                mark : {show: true},
                dataZoom : {show: true},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        xAxis : [
            {
                type : 'value',
                scale:true
            }
        ],
        yAxis : [
            {
                type : 'value',
                scale:true
            }
        ],
        series : [
        ],
        animation: false
    };
    var chartContainer = document.getElementById('chartContainer');
    for(var x in this.chartsData) {
        // 基于准备好的dom，初始化echarts实例
        var chartDom = document.createElement("DIV");
        chartDom.className = 'chart-body';
        chartContainer.appendChild(chartDom);
        var chartModel = echarts.init(chartDom);
        var chartData = this.chartsData[x];

        var option = JSON.parse(JSON.stringify(optionTemplete));
        option.title.text = chartData.title;
        for(var i in chartData.curves) {
            var curve = chartData.curves[i];
            option.legend.data.push(curve.title);
            var curveSeries = {
                name: curve.title,
                type:'graphGL',
                // coordinateSystem: 'cartesian2d',
                symbolSize: 2,
                // animation: false,
                // legendHoverLink: false,
                // lineStyle: {
                //     normal: {
                //         color: 'source',
                //         width: 2
                //     }
                // },
                nodes: (function () {
                    var nodes = [];
                    var len = curve.x.length;
                    for(var n=0; n<len; n++) {
                        var node = {
                            name: x + '-' + i + '-' + n,
                            value: [curve.x[n], curve.y[n]]
                        };
                        nodes.push(node);
                    }
                    return nodes;
                })(),
                links: (function () {
                    var links = [];
                    var len = curve.x.length;
                    for(var n=0; n<len-1; n++) {
                        var link = {
                            source: x + '-' + i + '-' + n,
                            target: x + '-' + i + '-' + (n + 1),
                        };
                        links.push(link);
                    }
                    return links;
                })()
            }
            option.series.push(curveSeries);
        }
        that.options.push(option);
        chartModel.setOption(option);
    }
}

[pissang]

graphGL 暂时不支持笛卡尔坐标系，后续优化

[kosilence]

感谢回复。 另外提一下我所使用的数据来源于文件大小为 40M+ 的 log 文件，行数超过20万行。 我尝试了 scatterGL 模式的散点图 markLine 来实现，页面打开时加载速度超过 12s，拖拽和放大过程中也有不易接受的卡顿延迟。 同样，使用 graph 关系图表来实现这样的需求，渲染页面也需要相同的时间，体验同 scatterGL 类似。 希望 echarts 能够优化一下大数据量散点图连线绘制的需求，感谢。

2017-05-18 14:53 GMT+08:00 Yi Shen notifications@github.com:

graphGL 不支持笛卡尔坐标系，这个数据量用 graph 就可以了

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/ecomfe/echarts-gl/issues/59#issuecomment-302317343, or mute the thread https://github.com/notifications/unsubscribe-auth/ARCiW1XTyardUV2KE-MSTyFOW75uBiy_ks5r6-rwgaJpZM4NdX9d .

[pissang]

数据方便私下发给我们做测试么？我们不会公开

[kosilence]

@pissang Sorry，数据太敏感，可能不行，不好意思哈