graphGL 应用在二维坐标系，关系图表显示不正常 #59
Description
问题描述
我的应用场景是拥有大数据量的散点，需要按照时间顺序连线并且在二维坐标系内展示，仅仅使用 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);
}
}
