echarts 关系图 拖动和缩放 和连线流动效果

ECharts 关系图可以通过设置 `roam` 属性来启用拖动和缩放功能，设置 `focusNodeAdjacency` 属性来启用节点间的联动高亮。此外，ECharts 还提供了 `animation` 动画属性，可以通过设置节点之间的连线数据进行流动效果的展示。

下面是一个简单的示例代码，展示了如何实现拖动和缩放、节点联动高亮以及连线流动效果：

// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('main'));

// 设置关系图的配置项和数据
var option = {
  // 启用拖动和缩放功能
  roam: true,
  // 启用节点间的联动高亮
  focusNodeAdjacency: true,
  // 设置关系图的节点和连线数据
  series: [{
    type: 'graph',
    layout: 'force',
    symbolSize: 50,
    data: [{
      name: '节点1',
      x: 100,
      y: 100
    }, {
      name: '节点2',
      x: 200,
      y: 200
    }],
    links: [{
      source: '节点1',
      target: '节点2'
    }],
    // 设置节点和连线的样式
    itemStyle: {
      color: '#009688'
    },
    lineStyle: {
      color: '#999'
    },
    // 设置连线的流动效果
    emphasis: {
      lineStyle: {
        width: 3,
        curveness: 0.3,
        color: '#ff0000'
      }
    },
    animationDuration: 3000,
    animationEasingUpdate: 'quinticInOut'
  }]
};

// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);

上述代码中，通过设置 `roam` 属性启用拖动和缩放功能，设置 `focusNodeAdjacency` 属性启用节点间的联动高亮。通过设置 `emphasis` 属性来控制节点和连线的高亮样式，设置 `animationDuration` 属性来控制连线流动效果的动画时间，设置 `animationEasingUpdate` 属性来控制动画的缓动函数。