echarts简单的关系图

我是一只小猫咪aa

已于 2022-08-21 20:09:39 修改

阅读量740

点赞数 2

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

于 2020-11-17 11:05:05 首次发布

本文链接：https://blog.csdn.net/weixin_44523717/article/details/109738456

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ECharts关系图</title>
  <!-- 引入 echarts.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let baseName = "项目";
    let chartData = {
      '人员': ['人员1', '人员2', '人员3'],
      '机构': ['机构1', '机构2', '机构3'],
      '文献': ['文献1', '文献2', '文献3'],
      '测试  ': ['嗯嗯', '嗷嗷'']
    };

    let datas = [{
      name: baseName || '',
      draggable: true
    }];
    let lines = [];
    let categoryIdx = 0;
    let keyIndex = 0;
    let dataIndex = 0;
  for (const key in chartData) {
      let values = chartData[key];
      keyIndex = dataIndex;
      datas.push({ name: key, category: categoryIdx, draggable: true });
      console.log(key);
      
      keyIndex++;
      dataIndex++;
      lines.push({
        source: 0,
        target: keyIndex,
        value: ''
      });

      for (let i = 0; i < values.length; i++) {
        let val = values[i];
        datas.push({ name: val, category: categoryIdx, draggable: true });
        dataIndex++;
        lines.push({
          source: keyIndex,
          target: dataIndex,
          value: ''
        });
      }
      categoryIdx++;
    };
    console.log(datas);
    console.log(lines);
    
    let option = {
      title: {
        text: ''
      },
      tooltip: {},
      animationDurationUpdate: 100,
      label: {
        normal: {
          show: true,
          textStyle: {
            fontSize: 12
          },
        }
      },
      series: [
        {
        type: 'graph',
        layout: 'force',//采用力引导布局
        symbolSize: 45,
        legendHoverLink: true,//启用图例 hover 时的联动高亮。
        focusNodeAdjacency: true,//在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
        roam: true,
        label: {
          normal: {
            show: true,
            position: 'inside',
            textStyle: {
              fontSize: 12
            },
          }
        },
        force: {
          repulsion: 100
        },
        edgeSymbolSize: [5, 10],
        edgeLabel: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 10
            },
            formatter: "{c}"
          }
        },
        categories: [{
          itemStyle: {
            normal: {
              color: "#BB8FCE",
            }
          }
        }, {
          itemStyle: {
            normal: {
              color: "#0099FF",
            }
          }
        }, {
          itemStyle: {
            normal: {
              color: "#5DADE2",
            }
          }
        },
        {
          itemStyle: {
            normal: {
              color: "#5DADE2",
            }
          }
        }
      ],
        data: datas,
        links: lines,
        lineStyle: {
          normal: {
            opacity: 0.9,
            width: 1,
            curveness: 0
          }
        }
      }
    ]
    };
    myChart.setOption(option);
  </script>
</body>

</html>

在这里插入图片描述