echarts关系图--vue3-点击按钮添加节点

一个简单的关系图,

代码实现:

<template>
  <div class="app">
    <button @click="onclick">点击添加节点</button>
    <div
      class="echarts"
      ref="echartsRef"
      style="width: 1000px; height: 800px; border: 1px solid"
    ></div>
    <!-- <a href="../../assets/2020022708453463508.jpgs" download="1.jpg">
      点击下载
    </a> -->
  </div>
</template>
<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import { init } from "echarts";
let echartsRef = ref(null);
// 存储当前悬停节点的索引
let currentTooltipIndex = ref(null);

let onclick = () => {
  let obj = {
    id: 21,
    category: 1,
    name: "韦小宝",
    symbolSize: 22,
    draggable: true,
  };
  a.push(obj);
  let c = {
    source: 1,
    target: 21,
    lineStyle: {
      color: "source",
    },
  };
  b.push(c);
  echartsFn();
};

let a = [
  {
    id: 0,
    category: 1,
    name: "小明",
    symbolSize: 5,
    draggable: "true",
  },
  {
    id: 1,
    category: 2,
    name: "小王",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 2,
    category: 2,
    name: "小赵",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 3,
    category: 2,
    name: "小钱",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 4,
    category: 1,
    name: "小华",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 5,
    category: 2,
    name: "小孙",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 6,
    category: 2,
    name: "小李",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 7,
    category: 2,
    name: "小周",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 8,
    category: 1,
    name: "小杰",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 9,
    category: 2,
    name: "小吴",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 10,
    category: 2,
    name: "小郑",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 11,
    category: 1,
    name: "小婷",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 12,
    category: 2,
    name: "小谢",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 13,
    category: 2,
    name: "小潘",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 14,
    category: 1,
    name: "小妍",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 15,
    category: 2,
    name: "小苏",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 16,
    category: 2,
    name: "小陈",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 17,
    category: 1,
    name: "小飞",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 18,
    category: 2,
    name: "小郭",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 19,
    category: 2,
    name: "小彭",
    symbolSize: 33,
    draggable: "true",
  },
  {
    id: 20,
    category: 0,
    name: "张三",
    symbolSize: 33,
    draggable: "true",
  },
];
let b = [
  {
    source: 1,
    target: 0,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 2,
    target: 0,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 3,
    target: 0,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 5,
    target: 4,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 6,
    target: 4,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 7,
    target: 4,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 9,
    target: 8,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 10,
    target: 8,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 12,
    target: 11,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 13,
    target: 11,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 15,
    target: 14,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 16,
    target: 14,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 18,
    target: 17,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 19,
    target: 17,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 0,
    target: 20,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 4,
    target: 20,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 8,
    target: 20,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 11,
    target: 20,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 14,
    target: 20,
    lineStyle: {
      color: "source",
    },
  },
  {
    source: 17,
    target: 20,
    lineStyle: {
      color: "source",
    },
  },
];
let echartsFn = () => {
  var myChart = init(echartsRef.value);

  let options = {
    title: {
      text: "张三的朋友和他朋友的朋友",
      top: "top",
      left: "left",
      textStyle: {
        color: "#292421",
      },
    },
    tooltip: {
      formatter: "{b}",
    },
    backgroundColor: "#FFFFFF",
    legend: {
      show: true,
      data: [
        {
          name: "父节点",
          icon: "rect",
        },
        {
          name: "层级二",
          icon: "roundRect",
        },
        {
          name: "层级三",
          icon: "circle",
        },
      ],
      textStyle: {
        color: "#292421",
      },
      icon: "circle",
      type: "scroll",
      orient: "horizontal",
      left: 10,
      top: 20,
      bottom: 20,
      itemWidth: 10,
      itemHeight: 10,
    },
    animationDuration: 0,
    animationEasingUpdate: "quinticInOut",
    series: [
      {
        name: "知识图谱",
        type: "graph",
        layout: "force",
        layoutScale: 0.5,
        force: {
          repulsion: 300,
          gravity: 0.1,
          edgeLength: 15,
          layoutAnimation: true,
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            const dataIndex = params.dataIndex;

            if (dataIndex === currentTooltipIndex.value) {
              // 显示当前悬停节点的tooltip内容
              return params.data.tooltipContent;
            } else {
              // 隐藏tooltip
              return "";
            }
          },
        },
        emphasis: {
          focus: "adjacency",
          label: {
            show: true,
          },
        },
        edgeLength: 120,
        data: a,
        links: b,
        categories: [
          {
            name: "父节点",
            symbol: "rect",
            label: {},
          },
          {
            name: "层级二",
            symbol: "rect",
          },
          {
            name: "层级三",
            symbol: "roundRect",
          },
        ],
        roam: true,
        label: {
          show: true,
          position: "bottom",
          formatter: "{b}",
          fontSize: 10,
          fontStyle: "600",
        },
        lineStyle: {
          opacity: 0.9,
          width: 1.5,
          curveness: 0,
        },
      },
    ],
  };
  // 监听节点的点击事件
  myChart.on("click", function (params) {
    const dataIndex = params.dataIndex;

    if (dataIndex === currentTooltipIndex.value) {
      // 如果点击的是已经显示的tooltip的节点，则隐藏tooltip
      currentTooltipIndex.value = null;
    } else {
      // 否则，更新currentTooltipIndex的值为当前点击节点的索引
      currentTooltipIndex.value = dataIndex;
    }

    // 刷新图表
    myChart.setOption(options);
  });
  myChart.setOption(options);
};
onMounted(() => {
  echartsFn();

  // watch(myGraphData, (newval) => {}, { immediate: true });
});
</script>