echarts制作关系图谱

椒盐大肥猫

已于 2023-09-20 16:02:22 修改

阅读量413

点赞数

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

于 2023-09-20 15:09:07 首次发布

本文链接：https://blog.csdn.net/qq_42832446/article/details/133081373

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>ECharts</title>
  <!-- 引入刚刚下载的 ECharts 文件 -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 100%;height:100vh;"></div>
<script type="text/javascript">

  const data = {
     
    'nodes': [
      {
      id: '0', name: 'Myriel', category: 0 },
      {
      id: '1', name: 'Napoleon', category: 0 },
      {
      id: '2', name: 'MlleBaptistine', category: 1 },
      {
      id: '3', name: 'MmeMagloire', category: 1 },
      {
      id: '4', name: 'CountessDeLo', category: 0 },
      {
      id: '5', name: 'Geborand', category: 0 },
      {
      id: '6', name: 'Champtercier', category: 0 },
      {
      id: '7', name: 'Cravatte', category: 0 },
      {
      id: '8', name: 'Count', category: 0 },
      {
      id: '9', name: 'OldMan', category: 0 },
      {
      id: '10', name: 'Labarre', category: 1 },
      {
      id: '11', name: 'Valjean', category: 1 },
      {
      id: '12', name: 'Marguerite', category: 1 },
      {
      id: '13', name: 'MmeDeR', category: 1 },
      {
      id: '14', name: 'Isabeau', category: 1 },
      {
      id: '15', name: 'Gervais', category: 1 },
      {
      id: '16', name: 'Tholomyes', category: 2 },
      {
      id: '17', name: 'Listolier', category: 2 },
      {
      id: '18', name: 'Fameuil', category: 2 },
      {
      id: '19', name: 'Blacheville', category: 2 },
      {
      id: '20', name: 'Favourite', category: 2 },
      {
      id: '21', name: 'Dahlia', category: 2 },
      {
      id: '22', name: 'Zephine', category: 2 },
      {
      id: '23', name: 'Fantine', category: 2 },
      {
      id: '24', name: 'MmeThenardier', category: 7 },
      {
      id: '25', name: 'Thenardier', category: 7 },
      {
      id: '26', name: 'Cosette', category: 6 },
      {
      id: '27', name: 'Javert', category: 7 },
      {
      id: '28', name: 'Fauchelevent', category: 4 },
      {
      id: '29', name: 'Bamatabois', category: 3 },
      {
      id: '30', name: 'Perpetue', category: 2 },
      {
      id: '31', name: 'Simplice', category: 2 },
      {
      id: '32', name: 'Scaufflaire', category: 1 },
      {
      id: '33', name: 'Woman1', category: 1 },
      {
      id: '34', name: 'Judge', category: 3 },
      {
      id: '35', name: 'Champmathieu', category: 3 },
      {
      id: '36', name: 'Brevet', category: 3 },
      {
      id: '37', name: 'Chenildieu', category: 3 },
      {
      id: '38', name: 'Cochepaille', category: 3 },
      {
      id: '39', name: 'Pontmercy', category: 6 },
      {
      id: '40', name: 'Boulatruelle', category: 7 },
      {
      id: '41', name: 'Eponine', category: 7 },
      {
      id: '42', name: 'Anzelma', category: 7 },
      {
      id: '43', name: 'Woman2', category: 6 },
      {
      id: '44', name: 'MotherInnocent', category: 4 },
      {
      id: '45', name: 'Gribier', category: 4 },
      {
      id: '46', name: 'Jondrette', category: 5 },
      {
      id: '47', name: 'MmeBurgon', category: 5 },
      {
      id: '48', name: 'Gavroche', category: 8 },
      {
      id: '49', name: 'Gillenormand', category: 6 },
      {
      id: '50', name: 'Magnon', category: 6 },
      {
      id: '51', name: 'MlleGillenormand', category: 6 },
      {
      id: '52', name: 'MmePontmercy', category: 6 },
      {
      id: '53', name: 'MlleVaubois', category: 6 },
      {
      id: '54', name: 'LtGillenormand', category: 6 },
      {
      id: '55', name: 'Marius', category: 6 },
      {
      id: '56', name: 'BaronessT', category: 6 },
      {
      id: '57', name: 'Mabeuf', category: 8 },
      {
      id: '58', name: 'Enjolras', category: 8 },
      {
      id: '59', name: 'Combeferre', category: 8 },
      {
      id: '60', name: 'Prouvaire', category: 8 },
      {
      id: '61', name: 'Feuilly', category: 8 },
      {
      id: '62', name: 'Courfeyrac', category: 8 },
      {
      id: '63', name: 'Bahorel', category: 8 },
      {
      id: '64', name: 'Bossuet', category: 8 },
      {
      id: '65', name: 'Joly', category: 8 },
      {
      id: '66', name: 'Grantaire', category: 8 },
      {
      id: '67', name: 'MotherPlutarch', category: 8 },
      {
      id: '68', name: 'Gueulemer', category: 7 },
      {
      id: '69', name: 'Babet', category: 7 },
      {