【Echarts】Echarts 关系图 力导图类型配置

记录下

效果图

配置项

let myChart: any = null;
const categories = [
  {
    name: "错误码",
  },
  {
    name: "原因",
  },
  {
    name: "设备",
  },
  {
    name: "用户操作",
  },
  {
    name: "现象",
  },
];

// 初始化分布图
const initEchrts = () => {
  nextTick(() => {
    if (myChart != null && myChart != "" && myChart != undefined) {
      myChart.dispose(); // 销毁
    }
    const relationData = JSON.parse(JSON.stringify(props.echartsData));
    const el = document.getElementById("echarts")!;
    myChart = echarts.init(el);
    relationData.nodes.forEach((item: any) => {
      item.itemStyle = {
        normal: {
          // color: colorMap[item.label],
          borderColor: colorBorderMap[item.label],
          borderWidth: 3, // 边框
        },
      };
      // 初始化 category
      for (let index = 0; index < categories.length; index++) {
        const element = categories[index];
        if (element.name === labelMap[item.label]) {
          item.category = index;
          break;
        }
      }
    });
    let option = {
      // 鼠标hover的提示语
      tooltip: {
        show: true, //默认值为true
        showContent: true, //是否显示提示框浮层
        trigger: "item", //触发类型，默认数据项触发
        triggerOn: "mousemove", //提示触发条件，mousemove鼠标移至触发，还有click点击触发
        alwaysShowContent: false, //默认离开提示框区域隐藏，true为一直显示
        showDelay: 0, //浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在 triggerOn 为 'mousemove' 时有效。
        hideDelay: 200, //浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。
        enterable: false, //鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
        position: "right", //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。只在 trigger 为'item'的时候有效。
        confine: false, //是否将 tooltip 框限制在图表的区域内。外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。
        transitionDuration: 0.4, //提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。
        formatter: function (x: any) {
          return x.data.name;
        },
      },
      // 圖表控件
      legend: {
        top: 20,
        left: 20,
        itemWidth: 50,
        itemHeight: 28,
        orient: "vertical",
        selectedMode: false,
        data: categories.map(function (a) {
          return a.name;
        }),
        textStyle: {
          fontSize: 16,
        },
      },
      // 圖表控件对应颜色（索引 01234）
      color: ["#FFB5AF", "#93E3FC", "#CDE8B5", "#E292FE", "#FED9A8"],
      series: [
        {
          type: "graph", // 类型:关系图
          layout: "force", // 图的布局，类型为力导图
          categories: categories, // lengend 关联
          symbolSize: 50, // 调整节点的大小
          roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
          edgeSymbol: ["circle", "arrow"], // 箭头
          edgeSymbolSize: [0.1, 10], // 箭头大小
          force: {
            initLayout: "circular",
            repulsion: 2500, // 节点斥力
            gravity: 0.5, // 所有节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
            edgeLength: [10, 50], // 边的两个节点之间的距离
            layoutAnimation: false, // 节点动画
          },
          draggable: false, // 节点是否可拖拽，只在使用力引导布局(layout: 'force',)的时候有用
          focusNodeAdjacency: true, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
          // 线条样式
          lineStyle: {
            width: 2,
            color: "#555555",
            curveness: 0.3, // 线条的曲线程度，从0到1 ---  不加弧度，两节点互相指向时，线上的字会重叠
            emphasis: {
              //高亮状态
              width: 8,
            },
          },
          // 线上的字体
          edgeLabel: {
            textStyle: {
              fontSize: 12,
              color: "#000000",
            },
            show: true,
            formatter: function (x: any) {
              return lineTextMap[x.data.type];
            },
          },
          // 图形上的文本标签
          label: {
            show: true,
            textStyle: {
              fontSize: 12,
            },
            width: 90,
            overflow: "truncate",
            ellipsis: "...",
          },
          // 数据
          data: relationData.nodes,
          links: relationData.edges,
        },
      ],
    };
    myChart.setOption(option);
    // 监听点击
    myChart.on("click", function (param: any) {
      console.log("param---->", param);
      console.log("点击了", param.data.name, param.data.id, param.data.label);
      if (route.name === "home") {
        router.push({
          path: "details",
          query: { sourceName: param.data.name },
        });
      }
      if (route.name === "fault") {
        emit("nodesClcik", param.data);
      }
    });
  });
};