echarts绘制关系图gragh示例

ECharts是一个强大的数据可视化库，可以用来创建各种图表，包括关系图（网络图）。下面是一个简单的ECharts关系图（Graph）绘制示例：

// 引入echarts.js库
import echarts from 'echarts';

// 创建一个ECharts实例
const myChart = echarts.init(document.getElementById('main'));

// 定义节点数据
const nodes = [
  { name: 'A', value: 10 },
  { name: 'B', value: 20 },
  { name: 'C', value: 30 },
  // ...更多的节点
];

// 定义边（连接）数据
const edges = [
  { source: 'A', target: 'B' },
  { source: 'B', target: 'C' },
  // ...更多的边
];

// 设置图形配置
const graphConfig = {
  type: 'graph',
  layout: 'force',
  // 视觉样式设置
  edgeSymbol: ['circle', 'arrow'], // 边的形状和箭头
  nodeLabel: {
    normal: { show: true }
  },
  data: {
    nodes,
    edges
  },
  categories: ['nodes', 'edges'], // 分类显示节点和边
};

// 绘制图表
myChart.setOption(graphConfig);

// 监听图表的点击事件，可以进一步处理交互
myChart.on('click', function (params) {
  console.log(`You clicked on node ${params.name}`);
});