ECharts 图表：揭秘数据可视化新姿势

2023-07-27 22:04:36

深入探索 ECharts 图表中的图节点

节点的隐匿之谜

您是否曾遭遇过在 Graph 图表中使用直角坐标系时，节点离奇消失的情况？这并非幻觉，而是坐标系设置的玄机。Graph 图表默认采用笛卡尔坐标系，而直角坐标系则使用极坐标系。因此，若要让节点现身，需明确将坐标系类型设定为笛卡尔坐标系。

节点随心所欲的拖拽

ECharts 图表赋予您掌控节点位置的魔力。通过启用拖拽功能，您可以随意拖拽节点，见证它们在图表中的舞动。要开启此功能，请在 Graph 图表的 options 中将 draggable 设为 true。

var myChart = echarts.init(document.getElementById('myChart'));
var option = {
  series: [{
    type: 'graph',
    layout: 'none',
    draggable: true,
    data: [...]
  }]
};
myChart.setOption(option);

当您拖拽节点时，ECharts 图表会记录节点偏移量，并将其存储在节点的 data 属性中。通过如下代码，您可以获取该偏移量：

myChart.on('dragend', function (params) {
  var nodeData = params.data;
  var offsetX = nodeData.x - nodeData.originX;
  var offsetY = nodeData.y - nodeData.originY;
  console.log(offsetX, offsetY);
});

节点间连线的艺术

ECharts 图表还为您提供绘制节点连线的功能，赋予图表更多活力。只需在 Graph 图表的 links 属性中设定 source 和 target 属性，即可勾勒出节点间的线条。

var myChart = echarts.init(document.getElementById('myChart'));
var option = {
  series: [{
    type: 'graph',
    layout: 'none',
    links: [{
      source: 'node1',
      target: 'node2'
    }, ...]
  }]
};
myChart.setOption(option);