echarts关系图

dongsdh

已于 2022-10-08 09:31:22 修改

阅读量123

点赞数

分类专栏：第三方-echarts 文章标签： echarts javascript 前端

于 2022-09-30 17:22:09 首次发布

本文链接：https://blog.csdn.net/dongsdh/article/details/127126824

版权

第三方-echarts 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>关系网</title>
  <script src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
  <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> -->
  <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script> -->
  <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> -->
  <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script> -->
  <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> -->
  <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> -->

  <!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> -->
</head>

<body>
  <div id="garps" class="container" style="width: 800px;height: 600px">
    <!-- <script src="https://assets.pyecharts.org/assets/main.js"></script> -->
    <script>
      var chart_b859ef36a1b245b2b1eb24efe9b62146 = echarts.init(
        document.getElementById('garps'), 'white', { renderer: 'canvas' });
      option = {
        backgroundColor: '#1a4377',
        grid: {
          left: '10%',
          top: 60,
          right: '10%',
          bottom: 60,
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        series: [{
          type: 'graph',
          layout: 'force',
          force: {
            repulsion: 800,
            edgeLength: 90,
            layoutAnimation: true,
          },
          symbolSize: 70,
          nodeScaleRatio: 1, //图标大小是否随鼠标滚动而变
          roam: true, //缩放
          draggable: true, //节点是否可以拖拽
          focusNodeAdjacency: false, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
          edgeSymbol: ['circle', 'arrow'], //线2头标记
          label: {
            normal: {
              show: true,
              position: 'inside',
              color: 'gold'
            }
          },
          edgeLabel: {
            normal: {
              show: true,
              textStyle: {
                fontSize: 12,
                color: '#fff'
              },
              formatter: "{c}"
            }
          },
          categories: [{
            name: 'vip',
          }, {
            name: '租户',
            symbol: 'rect'
          }],
          itemStyle: {
            normal: {
              borderColor: '#04f2a7',
              borderWidth: 2,
              shadowBlur: 10,
              shadowColor: '#04f2a7',
              color: '#001c43',
            }
          },
          lineStyle: {
            normal: {
              opacity: 0.9,
              width: 2,
              curveness: 0,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#e0f55a' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#639564' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              }
            }
          },
          symbolKeepAspect: false,
          // 金讯、子涛、诺迎、赛胜、利奥、百跃
          data: [{
            name: '罗伟',
          },
          {
            name: '地址1',
          },
          {
            name: '地址2',
          },
          {
            name: '地址3',
          },
          {
            name: '地址4',

          },
          {
            name: '地址5',
          },
          {
            name: '友谊路308号',
          },
          {
            name: '友谊路203号',
          },
          {
            name: '友谊路118号',
          }
          ],
          links: [{
            source: 0,
            target: 1,
            value: '常驻'
          },
          {
            source: 0,
            target: 2,
            value: '常驻'
          },
          {
            source: 0,
            target: 3,
            value: '常驻'
          },
          {
            source: 0,
            target: 4,
            value: '常驻'
          },
          {
            source: 0,
            target: 5,
            value: '不常驻'
          },
          {
            source: 2,
            target: 6,
            value: '常驻'
          }, {
            source: 3,
            target: 7,
            value: '常驻'
          }, {
            source: 4,
            target: 8,
            value: '常驻'
          },
          ],
        }]
      }
      chart_b859ef36a1b245b2b1eb24efe9b62146.setOption(option);
    </script>
  </div>
</body>

</html>