Echart 知识图谱--连接线段

在这里插入图片描述

···html

<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

<script type="text/javascript">
  var dom = document.getElementById("container");
  var myChart = echarts.init(dom, "dark", {
    renderer: "canvas",
    useDirtyRect: false,
  });
  var app = {};

  var option;
  let isMarkLink = false;

  option = {
    // backgroundColor: '',
    animation: true,
    darkMode: true,
    color: ["#4992ff", "#7cffb2", "#fddd60", "#ff6e76", "#58d9f9", "#05c091", "#ff8a45", "#8d48e3", "#dd79ff"],
    textStyle: {
      color: "#B9B8CE",
      fontFamily: "Microsoft YaHei",
      fontSize: 12,
      fontStyle: "normal",
      fontWeight: "normal",
    },
    timeAxis: {
      axisLine: {
        lineStyle: {
          color: "#B9B8CE",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#484753",
        },
      },
      splitArea: {
        areaStyle: {
          color: ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"],
        },
      },
      minorSplitLine: {
        lineStyle: {
          color: "#20203B",
        },
      },
    },
    logAxis: {
      axisLine: {
        lineStyle: {
          color: "#B9B8CE",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#484753",
        },
      },
      splitArea: {
        areaStyle: {
          color: ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"],
        },
      },
      minorSplitLine: {
        lineStyle: {
          color: "#20203B",
        },
      },
    },
    valueAxis: {
      axisLine: {
        lineStyle: {
          color: "#B9B8CE",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#484753",
        },
      },
      splitArea: {
        areaStyle: {
          color: ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"],
        },
      },
      minorSplitLine: {
        lineStyle: {
          color: "#20203B",
        },
      },
    },
    categoryAxis: {
      axisLine: {
        lineStyle: {
          color: "#B9B8CE",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#484753",
        },
        show: false,
      },
      splitArea: {
        areaStyle: {
          color: ["rgba(255,255,255,0.02)", "rgba(255,255,255,0.05)"],
        },
      },
      minorSplitLine: {
        lineStyle: {
          color: "#20203B",
        },
      },
    },
    line: {
      symbol: "circle",
    },
    graph: {
      color: ["#4992ff", "#7cffb2", "#fddd60", "#ff6e76", "#58d9f9", "#05c091", "#ff8a45", "#8d48e3", "#dd79ff"],
    },
    gauge: {
      title: {
        color: "#B9B8CE",
      },
      axisLine: {
        lineStyle: {
          color: [[1, "rgba(207,212,219,0.2)"]],
        },
      },
      axisLabel: {
        color: "#B9B8CE",
      },
      detail: {
        color: "#EEF1FA",
      },
    },
    candlestick: {
      itemStyle: {
        color: "#f64e56",
        color0: "#54ea92",
        borderColor: "#f64e56",
        borderColor0: "#54ea92",
      },
    },
    colorBy: "series",
    gradientColor: ["#f6efa6", "#d88273", "#bf444c"],
    aria: {
      decal: {
        decals: [
          {
            color: "rgba(0, 0, 0, 0.2)",
            dashArrayX: [1, 0],
            dashArrayY: [2, 5],
            symbolSize: 1,
            rotation: 0.5235987755982988,
          },
          {
            color: "rgba(0, 0, 0, 0.2)",
            symbol: "circle",
            dashArrayX: [
              [8, 8],
              [0, 8, 8, 0],
            ],
            dashArrayY: [6, 0],
            symbolSize: 0.8,
          },
          {
            color: "rgba(0, 0, 0, 0.2)",
            dashArrayX: [1, 0],
            dashArrayY: [4, 3],
            rotation: -0.7853981633974483,
          },
          {
            color: "rgba(0, 0, 0, 0.2)",
            dashArrayX: [
              [6, 6],
              [0, 6, 6, 0],
            ],
            dashArrayY: [6, 0],
          },
          {
            color: "rgba(0, 0, 0, 0.2)",
            dashArrayX: [
              [1, 0],
              [1, 6],
            ],
            dashArrayY: [1, 0, 6, 0],
            rotation: 0.7853981633974483,
          },
          {
            color: "rgba(0, 0, 0, 0.2)",
            symbol: "triangle",
            dashArrayX: [
              [9, 9],
              [0, 9, 9, 0],
            ],
            dashArrayY: [7, 2],
            symbolSize: 0.75,
          },
        ],
      },
      label: {},
    },
    stateAnimation: {
      duration: 300,
      easing: "cubicOut",
    },
    animationDuration: 1000,
    animationDurationUpdate: 500,
    animationEasing: "cubicInOut",
    animationEasingUpdate: "cubicInOut",
    animationThreshold: 2000,
    progressiveThreshold: 3000,
    progressive: 400,
    hoverLayerThreshold: 3000,
    useUTC: false,
    axisPointer: [
      {
        lineStyle: {
          color: "#817f91",
          width: 1,
          type: "dashed",
        },
        crossStyle: {
          color: "#817f91",
        },
        label: {
          color: "#fff",
          show: true,
          formatter: null,
          precision: "auto",
          margin: 3,
          padding: [5, 7, 5, 7],
          backgroundColor: "auto",
          borderColor: null,
          borderWidth: 0,
          borderRadius: 3,
        },
        show: "auto",
        z: 50,
        type: "line",
        snap: false,
        triggerTooltip: true,
        triggerEmphasis: true,
        value: null,
        status: null,
        link: [],
        animation: null,
        animationDurationUpdate: 200,
        shadowStyle: {
          color: "rgba(210,219,238,0.2)",
        },
        handle: {
          show: false,
          icon: "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z",
          size: 45,
          margin: 50,
          color: "#333",
          shadowBlur: 3,
          shadowColor: "#aaa",
          shadowOffsetX: 0,
          shadowOffsetY: 2,
          throttle: 40,
        },
      },
    ],
    tooltip: [],
    series: [
      {
        type: "graph",
        layout: "none",
        nodes: [
          {
            id: "1711994991496056834",
            name: "实体1",
            icon: "aaarelate",
            color: "#48B8DD",
            x: "232",
            y: "119",
            picture: null,
            whetherShow: null,
            canSee: null,
            propertyList: [
              {
                id: "1711994991504445441",
                name: "name",
                type: 0,
                status: 0,
              },
            ],
            size: 1,
            none_x: "232",
            none_y: "119",
            force_x: 100,
            force_y: 100,
            customData: {
              id: "1711994991496056834",
              name: "实体1",
              icon: "aaarelate",
              color: "#48B8DD",
              x: "232",
              y: "119",
              picture: null,
              whetherShow: null,
              canSee: null,
              propertyList: [
                {
                  id: "1711994991504445441",
                  name: "name",
                  type: 0,
                  status: 0,
                },
              ],
              size: 1,
              none_x: "232",
              none_y: "119",
              force_x: 100,
              force_y: 100,
            },
            symbolSize: 30,
            itemStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#48B8DD",
                  },
                  {
                    offset: 0.6,
                    color: "#ffffff",
                  },
                ],
              },
              borderWidth: 15,
              borderColor: "#48B8DD33",
              emphasis: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
          },
          {
            id: "1711994991508639746",
            name: "实体2",
            icon: "aaarelate",
            color: "#48B8DD",
            x: "197.42737430167577",
            y: "153.12430167597728",
            picture: null,
            whetherShow: null,
            canSee: null,
            propertyList: [
              {
                id: "1711994991512834049",
                name: "name",
                type: 0,
                status: 0,
              },
            ],
            size: 1,
            none_x: "197.42737430167577",
            none_y: "153.12430167597728",
            force_x: 120,
            force_y: 120,
            customData: {
              id: "1711994991508639746",
              name: "实体2",
              icon: "aaarelate",
              color: "#48B8DD",
              x: "197.42737430167577",
              y: "153.12430167597728",
              picture: null,
              whetherShow: null,
              canSee: null,
              propertyList: [
                {
                  id: "1711994991512834049",
                  name: "name",
                  type: 0,
                  status: 0,
                },
              ],
              size: 1,
              none_x: "197.42737430167577",
              none_y: "153.12430167597728",
              force_x: 120,
              force_y: 120,
            },
            symbolSize: 30,
            itemStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#48B8DD",
                  },
                  {
                    offset: 0.6,
                    color: "#ffffff",
                  },
                ],
              },
              borderWidth: 15,
              borderColor: "#48B8DD33",
              emphasis: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
          },
          {
            id: "1711994991517028353",
            name: "实体3",
            icon: "aaarelate",
            color: "#48B8DD",
            x: "192.02769888580272",
            y: "125.60086003089785",
            picture: null,
            whetherShow: null,
            canSee: null,
            propertyList: [
              {
                id: "1711994991521222657",
                name: "name",
                type: 0,
                status: 0,
              },
            ],
            size: 1,
            none_x: "192.02769888580272",
            none_y: "125.60086003089785",
            force_x: 140,
            force_y: 140,
            customData: {
              id: "1711994991517028353",
              name: "实体3",
              icon: "aaarelate",
              color: "#48B8DD",
              x: "192.02769888580272",
              y: "125.60086003089785",
              picture: null,
              whetherShow: null,
              canSee: null,
              propertyList: [
                {
                  id: "1711994991521222657",
                  name: "name",
                  type: 0,
                  status: 0,
                },
              ],
              size: 1,
              none_x: "192.02769888580272",
              none_y: "125.60086003089785",
              force_x: 140,
              force_y: 140,
            },
            symbolSize: 30,
            itemStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#48B8DD",
                  },
                  {
                    offset: 0.6,
                    color: "#ffffff",
                  },
                ],
              },
              borderWidth: 15,
              borderColor: "#48B8DD33",
              emphasis: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
          },
          {
            id: "1711994991525416962",
            name: "实体4",
            icon: "aaarelate",
            color: "#48B8DD",
            x: "185.37211112324871",
            y: "126.26809497986947",
            picture: null,
            whetherShow: null,
            canSee: null,
            propertyList: [
              {
                id: "1711994991529611265",
                name: "name",
                type: 0,
                status: 0,
              },
            ],
            size: 1,
            none_x: "185.37211112324871",
            none_y: "126.26809497986947",
            force_x: 160,
            force_y: 160,
            customData: {
              id: "1711994991525416962",
              name: "实体4",
              icon: "aaarelate",
              color: "#48B8DD",
              x: "185.37211112324871",
              y: "126.26809497986947",
              picture: null,
              whetherShow: null,
              canSee: null,
              propertyList: [
                {
                  id: "1711994991529611265",
                  name: "name",
                  type: 0,
                  status: 0,
                },
              ],
              size: 1,
              none_x: "185.37211112324871",
              none_y: "126.26809497986947",
              force_x: 160,
              force_y: 160,
            },
            symbolSize: 30,
            itemStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#48B8DD",
                  },
                  {
                    offset: 0.6,
                    color: "#ffffff",
                  },
                ],
              },
              borderWidth: 15,
              borderColor: "#48B8DD33",
              emphasis: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
          },
          {
            id: "1711994991533805570",
            name: "实体5",
            icon: "aaarelate",
            color: "#48B8DD",
            x: "178.08856718735422",
            y: "140.0417307122122",
            picture: null,
            whetherShow: null,
            canSee: null,
            propertyList: [
              {
                id: "1711994991537999874",
                name: "name",
                type: 0,
                status: 0,
              },
            ],
            size: 1,
            none_x: "178.08856718735422",
            none_y: "140.0417307122122",
            force_x: 180,
            force_y: 180,
            customData: {
              id: "1711994991533805570",
              name: "实体5",
              icon: "aaarelate",
              color: "#48B8DD",
              x: "178.08856718735422",
              y: "140.0417307122122",
              picture: null,
              whetherShow: null,
              canSee: null,
              propertyList: [
                {
                  id: "1711994991537999874",
                  name: "name",
                  type: 0,
                  status: 0,
                },
              ],
              size: 1,
              none_x: "178.08856718735422",
              none_y: "140.0417307122122",
              force_x: 180,
              force_y: 180,
            },
            symbolSize: 30,
            itemStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#48B8DD",
                  },
                  {
                    offset: 0.6,
                    color: "#ffffff",
                  },
                ],
              },
              borderWidth: 15,
              borderColor: "#48B8DD33",
              emphasis: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
          },
          {
            id: "1711994991542194178",
            name: "实体6",
            icon: "aaarelate",
            color: "#48B8DD",
            x: "173.08430507006707",
            y: "126.554052815143",
            picture: null,
            whetherShow: null,
            canSee: null,
            propertyList: [
              {
                id: "1711994991546388481",
                name: "name",
                type: 0,
                status: 0,
              },
            ],
            size: 1,
            none_x: "173.08430507006707",
            none_y: "126.554052815143",
            force_x: 200,
            force_y: 200,
            customData: {
              id: "1711994991542194178",
              name: "实体6",
              icon: "aaarelate",
              color: "#48B8DD",
              x: "173.08430507006707",
              y: "126.554052815143",
              picture: null,
              whetherShow: null,
              canSee: null,
              propertyList: [
                {
                  id: "1711994991546388481",
                  name: "name",
                  type: 0,
                  status: 0,
                },
              ],
              size: 1,
              none_x: "173.08430507006707",
              none_y: "126.554052815143",
              force_x: 200,
              force_y: 200,
            },
            symbolSize: 30,
            itemStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#48B8DD",
                  },
                  {
                    offset: 0.6,
                    color: "#ffffff",
                  },
                ],
              },
              borderWidth: 15,
              borderColor: "#48B8DD33",
              emphasis: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
          },
          {
            id: "1711997519759593474",
            name: "实体7",
            icon: "aaarelate",
            color: "#48B8DD",
            x: "162.9007481928803",
            y: "134.96383873314807",
            picture: null,
            whetherShow: null,
            canSee: null,
            propertyList: [
              {
                id: "1712008872452870146",
                name: "name",
                type: 0,
                status: 0,
              },
            ],
            size: 1,
            none_x: "162.9007481928803",
            none_y: "134.96383873314807",
            force_x: 220,
            force_y: 220,
            customData: {
              id: "1711997519759593474",
              name: "实体7",
              icon: "aaarelate",
              color: "#48B8DD",
              x: "162.9007481928803",
              y: "134.96383873314807",
              picture: null,
              whetherShow: null,
              canSee: null,
              propertyList: [
                {
                  id: "1712008872452870146",
                  name: "name",
                  type: 0,
                  status: 0,
                },
              ],
              size: 1,
              none_x: "162.9007481928803",
              none_y: "134.96383873314807",
              force_x: 220,
              force_y: 220,
            },
            symbolSize: 30,
            itemStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#48B8DD",
                  },
                  {
                    offset: 0.6,
                    color: "#ffffff",
                  },
                ],
              },
              borderWidth: 15,
              borderColor: "#48B8DD33",
              emphasis: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
          },
          {
            id: "1712008872457064449",
            name: "实体8",
            icon: "aaarelate",
            color: "#48B8DD",
            x: "167.87227866446966",
            y: "132.97377584806412",
            picture: null,
            whetherShow: null,
            canSee: null,
            propertyList: [
              {
                id: "1712008872461258754",
                name: "name",
                type: 0,
                status: 0,
              },
            ],
            size: 1,
            none_x: "167.87227866446966",
            none_y: "132.97377584806412",
            force_x: 240,
            force_y: 240,
            customData: {
              id: "1712008872457064449",
              name: "实体8",
              icon: "aaarelate",
              color: "#48B8DD",
              x: "167.87227866446966",
              y: "132.97377584806412",
              picture: null,
              whetherShow: null,
              canSee: null,
              propertyList: [
                {
                  id: "1712008872461258754",
                  name: "name",
                  type: 0,
                  status: 0,
                },
              ],
              size: 1,
              none_x: "167.87227866446966",
              none_y: "132.97377584806412",
              force_x: 240,
              force_y: 240,
            },
            symbolSize: 30,
            itemStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#48B8DD",
                  },
                  {
                    offset: 0.6,
                    color: "#ffffff",
                  },
                ],
              },
              borderWidth: 15,
              borderColor: "#48B8DD33",
              emphasis: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
          },
          {
            id: "1712008872465453057",
            name: "实体9",
            icon: "aaarelate",
            color: "#48B8DD",
            x: "165.96401444305212",
            y: "118.86266410547644",
            picture: null,
            whetherShow: null,
            canSee: null,
            propertyList: [
              {
                id: "1712008872469647362",
                name: "name",
                type: 0,
                status: 0,
              },
            ],
            size: 1,
            none_x: "165.96401444305212",
            none_y: "118.86266410547644",
            force_x: 260,
            force_y: 260,
            customData: {
              id: "1712008872465453057",
              name: "实体9",
              icon: "aaarelate",
              color: "#48B8DD",
              x: "165.96401444305212",
              y: "118.86266410547644",
              picture: null,
              whetherShow: null,
              canSee: null,
              propertyList: [
                {
                  id: "1712008872469647362",
                  name: "name",
                  type: 0,
                  status: 0,
                },
              ],
              size: 1,
              none_x: "165.96401444305212",
              none_y: "118.86266410547644",
              force_x: 260,
              force_y: 260,
            },
            symbolSize: 30,
            itemStyle: {
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#48B8DD",
                  },
                  {
                    offset: 0.6,
                    color: "#ffffff",
                  },
                ],
              },
              borderWidth: 15,
              borderColor: "#48B8DD33",
              emphasis: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
            emphasis: {
              itemStyle: {
                color: {
                  type: "radial",
                  x: 0.5,
                  y: 0.5,
                  r: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#48B8DD",
                    },
                    {
                      offset: 0.6,
                      color: "#ffffff",
                    },
                  ],
                },
                borderWidth: 15,
                borderColor: "#48B8DD",
              },
            },
          },
        ],
        links: [
          {
            id: "1711994992297168897",
            name: "关系1",
            entityStartId: "1711994991542194178",
            entityStartName: "实体6",
            entityEndId: "1711994991533805570",
            entityEndName: "实体5",
            propertyList: [
              {
                id: "1711994992301363202",
                name: "name",
                type: 0,
              },
            ],
            color: "#9cf68a",
            size: "1.5",
            type: "1",
            source: "1711994991542194178",
            target: "1711994991533805570",
            customData: {
              id: "1711994992297168897",
              name: "关系1",
              entityStartId: "1711994991542194178",
              entityStartName: "实体6",
              entityEndId: "1711994991533805570",
              entityEndName: "实体5",
              propertyList: [
                {
                  id: "1711994992301363202",
                  name: "name",
                  type: 0,
                },
              ],
              color: "#9cf68a",
              size: "1.5",
              type: "1",
            },
            label: {
              color: "#fff",
            },
            lineStyle: {
              color: "#9cf68a",
            },
          },
          {
            id: "1711994992313946113",
            name: "关系1",
            entityStartId: "1711994991533805570",
            entityStartName: "实体5",
            entityEndId: "1711994991525416962",
            entityEndName: "实体4",
            propertyList: [
              {
                id: "1711994992318140418",
                name: "name",
                type: 0,
              },
            ],
            color: "#9cf68a",
            size: "1.5",
            type: "1",
            source: "1711994991533805570",
            target: "1711994991525416962",
            customData: {
              id: "1711994992313946113",
              name: "关系1",
              entityStartId: "1711994991533805570",
              entityStartName: "实体5",
              entityEndId: "1711994991525416962",
              entityEndName: "实体4",
              propertyList: [
                {
                  id: "1711994992318140418",
                  name: "name",
                  type: 0,
                },
              ],
              color: "#9cf68a",
              size: "1.5",
              type: "1",
            },
            label: {
              color: "#fff",
            },
            lineStyle: {
              color: "#9cf68a",
            },
          },
          {
            id: "1711994992326529025",
            name: "关系1",
            entityStartId: "1711994991525416962",
            entityStartName: "实体4",
            entityEndId: "1711994991517028353",
            entityEndName: "实体3",
            propertyList: [
              {
                id: "1711994992330723329",
                name: "name",
                type: 0,
              },
            ],
            color: "#9cf68a",
            size: "1.5",
            type: "1",
            source: "1711994991525416962",
            target: "1711994991517028353",
            customData: {
              id: "1711994992326529025",
              name: "关系1",
              entityStartId: "1711994991525416962",
              entityStartName: "实体4",
              entityEndId: "1711994991517028353",
              entityEndName: "实体3",
              propertyList: [
                {
                  id: "1711994992330723329",
                  name: "name",
                  type: 0,
                },
              ],
              color: "#9cf68a",
              size: "1.5",
              type: "1",
            },
            label: {
              color: "#fff",
            },
            lineStyle: {
              color: "#9cf68a",
            },
          },
          {
            id: "1711994992343306241",
            name: "关系1",
            entityStartId: "1711994991517028353",
            entityStartName: "实体3",
            entityEndId: "1711994991496056834",
            entityEndName: "实体1",
            propertyList: [
              {
                id: "1711994992347500546",
                name: "name",
                type: 0,
              },
            ],
            color: "#9cf68a",
            size: "1.5",
            type: "1",
            source: "1711994991517028353",
            target: "1711994991496056834",
            customData: {
              id: "1711994992343306241",
              name: "关系1",
              entityStartId: "1711994991517028353",
              entityStartName: "实体3",
              entityEndId: "1711994991496056834",
              entityEndName: "实体1",
              propertyList: [
                {
                  id: "1711994992347500546",
                  name: "name",
                  type: 0,
                },
              ],
              color: "#9cf68a",
              size: "1.5",
              type: "1",
            },
            label: {
              color: "#fff",
            },
            lineStyle: {
              color: "#9cf68a",
            },
          },
          {
            id: "1711994992355889153",
            name: "关系1",
            entityStartId: "1711994991496056834",
            entityStartName: "实体1",
            entityEndId: "1711994991508639746",
            entityEndName: "实体2",
            propertyList: [
              {
                id: "1711994992360083457",
                name: "name",
                type: 0,
              },
            ],
            color: "#9cf68a",
            size: "1.5",
            type: "1",
            source: "1711994991496056834",
            target: "1711994991508639746",
            customData: {
              id: "1711994992355889153",
              name: "关系1",
              entityStartId: "1711994991496056834",
              entityStartName: "实体1",
              entityEndId: "1711994991508639746",
              entityEndName: "实体2",
              propertyList: [
                {
                  id: "1711994992360083457",
                  name: "name",
                  type: 0,
                },
              ],
              color: "#9cf68a",
              size: "1.5",
              type: "1",
            },
            label: {
              color: "#fff",
            },
            lineStyle: {
              color: "#9cf68a",
            },
          },
          {
            id: "1711994992372666369",
            name: "关系1",
            entityStartId: "1711994991508639746",
            entityStartName: "实体2",
            entityEndId: "1711994991517028353",
            entityEndName: "实体3",
            propertyList: [
              {
                id: "1711994992376860673",
                name: "name",
                type: 0,
              },
            ],
            color: "#9cf68a",
            size: "1.5",
            type: "1",
            source: "1711994991508639746",
            target: "1711994991517028353",
            customData: {
              id: "1711994992372666369",
              name: "关系1",
              entityStartId: "1711994991508639746",
              entityStartName: "实体2",
              entityEndId: "1711994991517028353",
              entityEndName: "实体3",
              propertyList: [
                {
                  id: "1711994992376860673",
                  name: "name",
                  type: 0,
                },
              ],
              color: "#9cf68a",
              size: "1.5",
              type: "1",
            },
            label: {
              color: "#fff",
            },
            lineStyle: {
              color: "#9cf68a",
            },
          },
          {
            id: "1711994992385249282",
            name: "关系2",
            entityStartId: "1711994991517028353",
            entityStartName: "实体3",
            entityEndId: "1711994991496056834",
            entityEndName: "实体1",
            propertyList: [
              {
                id: "1711994992393637889",
                name: "name",
                type: 0,
              },
            ],
            color: "#9cf68a",
            size: "1.5",
            type: "1",
            source: "1711994991517028353",
            target: "1711994991496056834",
            customData: {
              id: "1711994992385249282",
              name: "关系2",
              entityStartId: "1711994991517028353",
              entityStartName: "实体3",
              entityEndId: "1711994991496056834",
              entityEndName: "实体1",
              propertyList: [
                {
                  id: "1711994992393637889",
                  name: "name",
                  type: 0,
                },
              ],
              color: "#9cf68a",
              size: "1.5",
              type: "1",
            },
            label: {
              color: "#fff",
            },
            lineStyle: {
              color: "#9cf68a",
            },
          },
          {
            id: "1711994992402026497",
            name: "关系3",
            entityStartId: "1711994991517028353",
            entityStartName: "实体3",
            entityEndId: "1711994991496056834",
            entityEndName: "实体1",
            propertyList: [
              {
                id: "1711994992406220801",
                name: "name",
                type: 0,
              },
            ],
            color: "#9cf68a",
            size: "1.5",
            type: "1",
            source: "1711994991517028353",
            target: "1711994991496056834",
            customData: {
              id: "1711994992402026497",
              name: "关系3",
              entityStartId: "1711994991517028353",
              entityStartName: "实体3",
              entityEndId: "1711994991496056834",
              entityEndName: "实体1",
              propertyList: [
                {
                  id: "1711994992406220801",
                  name: "name",
                  type: 0,
                },
              ],
              color: "#9cf68a",
              size: "1.5",
              type: "1",
            },
            label: {
              color: "#fff",
            },
            lineStyle: {
              color: "#9cf68a",
            },
          },
          {
            id: "1711994992418803714",
            name: "关系1",
            entityStartId: "1711994991496056834",
            entityStartName: "实体1",
            entityEndId: "1711994991517028353",
            entityEndName: "实体3",
            propertyList: [
              {
                id: "1711994992422998017",
                name: "name",
                type: 0,
              },
            ],
            color: "#9cf68a",
            size: "1.5",
            type: "1",
            source: "1711994991496056834",
            target: "1711994991517028353",
            customData: {
              id: "1711994992418803714",
              name: "关系1",
              entityStartId: "1711994991496056834",
              entityStartName: "实体1",
              entityEndId: "1711994991517028353",
              entityEndName: "实体3",
              propertyList: [
                {
                  id: "1711994992422998017",
                  name: "name",
                  type: 0,
                },
              ],
              color: "#9cf68a",
              size: "1.5",
              type: "1",
            },
            label: {
              color: "#fff",
            },
            lineStyle: {
              color: "#9cf68a",
            },
          },
        ],
        legendHoverLink: true,
        focusNodeAdjacency: true,
        roam: false,
        autoCurveness: true,
        edgeSymbol: ["none", "arrow"],
        draggable: true,
        scaleLimit: {
          min: 0.5,
          max: 5,
        },
        force: {
          initLayout: "circular",
          gravity: 0.1,
          repulsion: 50,
          edgeLength: 20,
          layoutAnimation: true,
          friction: 0.3,
        },
        label: {
          show: true,
          position: "bottom",
          color: "#fff",
          fontSize: 15,
          backgroundColor: "transparent",
          formatter: "{b}",
        },
        lineStyle: {
          color: "#D0D0D0",
          type: "solid",
          width: 2,
          opacity: 0.5,
        },
        edgeLabel: {
          show: true,
          fontSize: 14,
          fontWeight: 600,
          verticalAlign: "middle",
          color: "#fff",
          position: "middle",
          distance: 5,
        },
        emphasis: {
          focus: "none",
          itemStyle: {
            shadowColor: "#ffffffcc",
            shadowBlur: 20,
          },
          lineStyle: {
            color: "#409EFF",
          },
          edgeLabel: {
            color: "#409EFF",
            show: true,
          },
          scale: true,
          label: {
            show: true,
          },
        },
        markLine: {
          symbol: ["none", "arrow"],
          symbolSize: 8,
          label: {
            show: false,
          },
          lineStyle: {
            color: "#DA4A43",
            type: "dashed",
            width: 2,
            curveness: 0,
            opacity: 1,
          },
          z: -1,
          emphasis: {
            lineStyle: {
              width: 2,
            },
            label: {
              show: false,
            },
          },
          data: [],
        },
        color: ["#4992ff", "#7cffb2", "#fddd60", "#ff6e76", "#58d9f9", "#05c091", "#ff8a45", "#8d48e3", "#dd79ff"],
        z: 2,
        coordinateSystem: "view",
        circular: {
          rotateLabel: false,
        },
        left: "center",
        top: "center",
        symbol: "circle",
        symbolSize: 10,
        edgeSymbolSize: 10,
        center: null,
        zoom: 1,
        nodeScaleRatio: 0.6,
        itemStyle: {},
        select: {
          itemStyle: {
            borderColor: "#212121",
          },
        },
      },
    ],
    visualMap: [],
    legend: [],
    markArea: [],
    markLine: [
      {
        z: 5,
        symbol: ["circle", "arrow"],
        symbolSize: [8, 16],
        symbolOffset: 0,
        precision: 2,
        tooltip: {
          trigger: "item",
        },
        label: {
          show: true,
          position: "end",
          distance: 5,
        },
        lineStyle: {
          type: "dashed",
        },
        emphasis: {
          label: {
            show: true,
          },
          lineStyle: {
            width: 3,
          },
        },
        animationEasing: "linear",
      },
    ],
    markPoint: [],
    brush: [],
    dataZoom: [],
  };

  if (option && typeof option === "object") {
    myChart.setOption(option);
    myChart.on("click", (params) => {
      if (!isMarkLink) {
        const _o1 = myChart.getOption();
        _o1.series[0].markLine.data[0] = [
          {
            id: "link-1",
            idMemary: "",
            name: "",
            coord: [params.data.x, params.data.y],
          },
          {
            id: "",
            idMemary: "",
            name: "",
            coord: [params.data.x, params.data.y],
          },
        ];
        _o1.series[0].draggable = false;
        _o1.animation = false;
        myChart.setOption(_o1);
        isMarkLink = true;
      }
    });
    myChart.getZr().on("click", (params) => {
      if (isMarkLink) {
        const _o2 = myChart.getOption();
        _o2.series[0].markLine.data = [];
        _o2.series[0].draggable = true;
        _o2.animation = true;
        isMarkLink = false;
      }
    });
    myChart.getZr().on("mousemove", (params) => {
      if (isMarkLink && !params.target) {
        const _l1 = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY]);
        const _o3 = myChart.getOption();
        _o3.series[0].markLine.data[0][1] = {
          id: "",
          name: "",
          coord: _l1,
        };
        myChart.setOption(_o3);
      }
    });
    myChart.on("mouseover", (params) => {
      if (isMarkLink && params.dataType === "node") {
        const _o4 = myChart.getOption();
        _o4.series[0].markLine.data[0][1] = { id: "", name: "", coord: [params.data.x, params.data.y] };
        myChart.setOption(_o4);
      }
    });
  }

  window.addEventListener("resize", myChart.resize);
</script>

···

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值