Echarts Graph设置cartesian2d坐标系后节点与线条无法显示求助

问题重现 #

使用ECharts的Graph组件开发拓扑图时，为series配置coordinateSystem: 'cartesian2d'后，节点与连线完全无法显示；注释该配置项后，所有元素可正常渲染。原代码如下：

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});

var app = {};
var option;

option = {
  title: {
    text: 'Basic Graph'
  },
  tooltip: {},
  xAxis: {
    min: 0,
    max: 400,
    type: 'value',
    axisLine: { onZero: false },
    show: true
  },
  yAxis: {
    min: 0,
    max: 200,
    type: 'value',
    axisLine: { onZero: false },
    show: true
  },
  series: [{
    type: 'graph',
    coordinateSystem: 'cartesian2d',
    layout: 'none',
    symbolSize: 50,
    roam: true,
    label: {
      show: true
    },
    edgeSymbol: ['circle', 'arrow'],
    edgeSymbolSize: [4, 10],
    data: [{
      name: 'A',
      symbol: 'rect',
      symbolSize: [50, 30],
      x: 100,
      y: 100
    }, {
      name: 'B',
      symbol: 'circle',
      symbolSize: 40,
      x: 300,
      y: 100
    }],
    links: [{
      source: 'A',
      target: 'B'
    }],
    lineStyle: {
      opacity: 0.9,
      width: 2,
      curveness: 0
    },
    draggable: true
  }]
};

if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

问题原因 #

当Graph组件切换到cartesian2d坐标系时，节点坐标的定义规则发生变化：

• 默认坐标系下，节点坐标通过独立的x、y字段指定；
• 笛卡尔坐标系下，节点坐标需要通过value数组（格式为[x轴数值, y轴数值]）来传递，ECharts会根据该数组在笛卡尔坐标系中定位节点。原代码未遵循此规则，导致节点无法被正确渲染。

修复方案 #

将节点数据中的x、y字段替换为value数组，具体修改如下：

// 原节点数据
data: [{
  name: 'A',
  symbol: 'rect',
  symbolSize: [50, 30],
  x: 100,
  y: 100
}, {
  name: 'B',
  symbol: 'circle',
  symbolSize: 40,
  x: 300,
  y: 100
}]

// 修改后节点数据
data: [{
  name: 'A',
  symbol: 'rect',
  symbolSize: [50, 30],
  value: [100, 100]
}, {
  name: 'B',
  symbol: 'circle',
  symbolSize: 40,
  value: [300, 100]
}]

修复后完整代码 #

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});

var app = {};
var option;

option = {
  title: {
    text: 'Basic Graph'
  },
  tooltip: {},
  xAxis: {
    min: 0,
    max: 400,
    type: 'value',
    axisLine: { onZero: false },
    show: true
  },
  yAxis: {
    min: 0,
    max: 200,
    type: 'value',
    axisLine: { onZero: false },
    show: true
  },
  series: [{
    type: 'graph',
    coordinateSystem: 'cartesian2d',
    layout: 'none',
    symbolSize: 50,
    roam: true,
    label: {
      show: true
    },
    edgeSymbol: ['circle', 'arrow'],
    edgeSymbolSize: [4, 10],
    data: [{
      name: 'A',
      symbol: 'rect',
      symbolSize: [50, 30],
      value: [100, 100]
    }, {
      name: 'B',
      symbol: 'circle',
      symbolSize: 40,
      value: [300, 100]
    }],
    links: [{
      source: 'A',
      target: 'B'
    }],
    lineStyle: {
      opacity: 0.9,
      width: 2,
      curveness: 0
    },
    draggable: true
  }]
};

if (option && typeof option === 'object') {
  myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

内容的提问来源于stack exchange，提问作者miniWorld