echarts graphChart关系图简单逻辑实现

最新推荐文章于 2025-05-19 14:34:05 发布

Sherry Tian

最新推荐文章于 2025-05-19 14:34:05 发布

阅读量1.1k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/misstianyun/article/details/141832397

ECharts 的 graph 图表类型非常适合用来展示节点之间的关系，比如社交网络分析、系统架构图等。下面是一个简单的关系图功能，用来展示疾病与一些因素的关联关系。
在这里插入图片描述

1、数据之间的关系

首先，你需要准备数据来表示节点（nodes）和它们之间的边（links）。节点通常包括节点的名称或 ID，而边则包含两个节点之间的连接信息。

var data = {
   
    nodes: [
   	   {
   
         name: '疾病名称',
         symbolSize: [100, 100],
         itemStyle: {
   
           color: '#C280FF',
           borderColor: '#000'
         },
         value: '123456'
       }, {
   
         name: '食物1',
         symbolSize: [80, 80],
         itemStyle: {
   
           color: '#CAF982'
         },
         value: '123457'
       }, {
   
         name: '化合物1',
         symbolSize: [80, 80],
         itemStyle: {
   
           color: '#FACD91'
         },
         value: '123458'
       }, {
   
         name: '生活方式1',
         symbolSize: [80, 80],
         itemStyle: {
   
           color: '#FFFF80'
         },
         value: '123459'
       }, {
   
         name: '膳食模式1',
         symbolSize: [80, 80],
         itemStyle: {
   
           color: '#80FFFF'
         },
         value: '1234510'
       }
    ],
    links: [
        {
   
           target: '食物1',
           source: '疾病名称',
           category: 'Food'
         }, {
   
           target: '化合物1',
           source: '疾病名称',
           category: 'Compound'
         }, {
   
           target: '生活方式1',
           source: '疾病名称',
           category: 'lifestyle'
         }, {
   
           target: '膳食模式1',
           source: '疾病名称',
           category: 'dietary_pattern'
         }
    ]
};

通过仔细观察你会发现，nodes里面的数组存放的是将要展示倒关系图中的节点数据，links里面的数组存放的是，节点直接的联系。在我这个功能里，nodes的第一个节点元素是中间节点，其他节点要以它为中心进行环形分布。links中节点的target属性表示指向那个node节点，source表示将要围绕的节点，category是节点的分类，在下面的操作中我们将根据这个属性找到节点关系饼图的数据。

2、点击事件

chartClick (params) {
   
  console.log('click', params)
  if (params.componentType === 'series') {
   
    if (params.seriesType === 'graph') {
   
      if (params.dataType === 'edge') {
   
        // 点击到了 graph 的 edge（边）上。
        console.log('点击到了 graph 的 edge（边）上')
        this.showLinkModal(params)
      } else {
   
        // 点击到了 graph 的 node（节点）上。
        console.log