【Echarts】Echarts 關係圖 力導圖類型配置

記錄下

效果圖

image

配置項

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);
      }
    });
  });
};
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章