echarts绘制关系图gragh示例
时间: 2024-10-29 11:10:20 浏览: 30
ECharts是一个强大的数据可视化库,可以用来创建各种图表,包括关系图(网络图)。下面是一个简单的ECharts关系图(Graph)绘制示例:
```javascript
// 引入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}`);
});
阅读全文