2. 程式人生 > >echarts 關係圖節點重名問題解決方案！

echarts 關係圖節點重名問題解決方案！

阿新 • • 發佈：2018-12-28
  1. 專案中用到echarts現在不足為奇，但是關係圖（graph）這個東西比常規的餅圖，條形圖，折線圖等等這些都要難搞一些，專案中會有很多需求，
  2.   比如，A和B之間有多重關係能不能畫兩條以上的線？ 這個問題我遇到過，echarts本身就沒有實現兩條線以上這個功能，在官網只能找到最多兩條線的demo，最後只有想其他辦法解決專案需求。

  3. 再比如，關係圖節點名稱的問題，我們一般都是把人員姓名來做顯示，那麼問題來了，當遇到重名的時候咋辦呢？如果按照常規demo上的配置項來做肯定會報錯，這也是本篇文章主要要講的東西，我這裡有兩種方式來解決這個。

    第一種：先貼上程式碼

  4. <!DOCTYPE html>
  5. <html>
  6. <head>
  7.     <title>graph</title>
  8.     <meta charset="utf-8">
  9. </head>
  10. <body>
  11. <script type="text/javascript" src="echarts.js"></script>
  12. <div id="main" style="width: 700px;height: 700px"></div>
  13. <script type="text/javascript">
  14.     var dom = document.getElementById('main');
  15.     var myChart = echarts.init(dom);
  16.     var datas = [{
  17.             name: '節點1',
  18.             itemStyle: {
  19.                 normal: {
  20.                     color: '#f90', //圓點的顏色
  21.                     label: {
  22.                         position: 'bottom',
  23.                         textStyle: {
  24.                             color: '#f90'
  25.                         }
  26.                     }
  27.                 }
  28.             },
  29.         }, {
  30.             name: '節點2',
  31.             category: 1,
  32.             itemStyle: {
  33.                 normal: {
  34.                     color: '#090',
  35.                 },
  36.                 emphasis: {
  37.                     color: "#000"
  38.                 }
  39.             }
  40.         }, {
  41.             name: '節點2',
  42.             category: 1,
  43.             draggable: true,
  44.         }, {
  45.             name: '節點3',
  46.             category: 0,
  47.             draggable: true,
  48.         }, {
  49.             name: '節點5',
  50.             category: 0,
  51.             draggable: true,
  52.         }, {
  53.             name: '節點6',
  54.             category: 0,
  55.             draggable: true,
  56.         }]
  57.         var obj = {};
  58.         for(var i=0;i<datas.length;i++){
  59.             obj[i] = datas[i].name;
  60.         }
  61.         console.log(obj);
  62.         var data = [];
  63.         for(var p in obj){
  64.             data.push({
  65.                 name: p,
  66.                 showName: obj[p],
  67.                 tooltip: {
  68.                     show: true,
  69.                     formatter: function(params){
  70.                         return params.data.showName
  71.                     }
  72.                 }
  73.             })
  74.         }
  75.     var option = {
  76.     tooltip: {
  77.         show: false
  78.     },
  79.     legend: {
  80.         x: "center",
  81.         data: ["家人", "朋友"]
  82.     },
  83.     animation: false,
  84.     series: [{
  85.         categories: [{
  86.             name: '家人',
  87.             itemStyle: {
  88.                 normal: {
  89.                     color: "#009800",
  90.                 }
  91.             }
  92.         }, {
  93.             name: '朋友',
  94.             itemStyle: {
  95.                 normal: {
  96.                     color: "#4592FF",
  97.                 }
  98.             }
  99.         }],
  100.         type: 'graph',
  101.         layout: 'force',
  102.         symbol: "circle",
  103.         symbolSize: 50,
  104.         roam: true, //禁止用滑鼠滾輪縮小放大效果
  105.         edgeSymbol: ['circle', 'arrow'],
  106.         edgeSymbolSize: [0, 10],
  107.         // 連線線上的文字
  108.         focusNodeAdjacency: true, //劃過只顯示對應關係
  109.         edgeLabel: {
  110.             normal: {
  111.                 show: true,
  112.                 textStyle: {
  113.                     fontSize: 20
  114.                 },
  115.                 formatter: "{c}"
  116.             }
  117.         },
  118.         lineStyle: {
  119.             normal: {
  120.                 opacity: 1,
  121.                 width: 2,
  122.                 curveness: 0
  123.             }
  124.         },
  125.         // 圓圈內的文字
  126.         label: {
  127.             normal: {
  128.                 show: true,
  129.                 formatter: function(params){
  130.                     return params.data.showName
  131.                 }
  132.             }
  133.         },
  134.         force: {
  135.             repulsion: 5000
  136.         },
  137.         data: data,
  138.         links: [{
  139.             source: 0,
  140.             target: 1,
  141.             value: "朋友",
  142.             lineStyle: {
  143.                 normal: {
  144.                     color: '#38f',
  145.                     curveness: 0 // 線的彎曲度 0-1之間 越大則歪曲度更大
  146.                 }
  147.             },
  148.             label: {
  149.                 normal: {
  150.                     textStyle: {
  151.                         color: '#07ac72'
  152.                     }
  153.                 }
  154.             }
  155.         }, {
  156.             source: 0,
  157.             target: 2,
  158.             value: "朋友"
  159.         }, {
  160.             source: 0,
  161.             target: 3,
  162.             value: "家人"
  163.         }, {
  164.             source: 0,
  165.             target: 4,
  166.             value: "家人"
  167.         }, {
  168.             source: 0,
  169.             target: 5,
  170.             value: "家人"
  171.         }, ]
  172.     }]
  173. };
  174. myChart.setOption(option);
  175. </script>
  176. </body>
  177. </html>

以上程式碼執行結果如下圖：

 

 都有程式碼了，自己花點時間去研究下吧，我就不贅述了。

 

第二種方式：這種方式很簡單，就是給datas裡面加上一個唯一標識的，而這個欄位名必須是''id''，下面也提供一個簡單的例子吧。

  1. option = {
  2.     title: {
  3.         text: 'Graph 簡單示例'
  4.     },
  5.     tooltip: {},
  6.     animationDurationUpdate: 1500,
  7.     animationEasingUpdate: 'quinticInOut',
  8.     series : [
  9.         {
  10.             type: 'graph',
  11.             layout: 'none',
  12.             symbolSize: 50,
  13.             roam: true,
  14.             label: {
  15.                 normal: {
  16.                     show: true
  17.                 }
  18.             },
  19.             edgeSymbol: ['circle', 'arrow'],
  20.             edgeSymbolSize: [4, 10],
  21.             edgeLabel: {
  22.                 normal: {
  23.                     textStyle: {
  24.                         fontSize: 20
  25.                     }
  26.                 }
  27.             },
  28.             data: [{
  29.                 name: '節點1',
  30.                 id: '120',
  31.                 x: 300,
  32.                 y: 300
  33.             }, {
  34.                 name: '節點2',
  35.                 id: '121',
  36.                 x: 800,
  37.                 y: 300
  38.             }, {
  39.                 name: '節點2',
  40.                 id: '123',
  41.                 x: 550,
  42.                 y: 100
  43.             }, {
  44.                 name: '節點4',
  45.                 id: '124',
  46.                 x: 550,
  47.                 y: 500
  48.             }],
  49.             // links: [],
  50.             links: [{
  51.                 source: '120',
  52.                 target: '121',
  53.                 symbolSize: [5, 20],
  54.                 label: {
  55.                     normal: {
  56.                         show: true
  57.                     }
  58.                 },
  59.                 lineStyle: {
  60.                     normal: {
  61.                         width: 5,
  62.                         curveness: 0.2
  63.                     }
  64.                 }
  65.             }, {
  66.                 source: '120',
  67.                 target: '122',
  68.                 label: {
  69.                     normal: {
  70.                         show: true
  71.                     }
  72.                 },
  73.                 lineStyle: {
  74.                     normal: { curveness: 0.2 }
  75.                 }
  76.             }, {
  77.                 source: '120',
  78.                 target: '123'
  79.             }, {
  80.                 source: '120',
  81.                 target: '124'
  82.             }],
  83.             lineStyle: {
  84.                 normal: {
  85.                     opacity: 0.9,
  86.                     width: 2,
  87.                     curveness: 0
  88.                 }
  89.             }
  90.         }
  91.     ]
  92. };

最後效果圖如下：

 

謝謝大家！

相關推薦

echarts 關係圖節點重名問題解決方案！

專案中用到echarts現在不足為奇，但是關係圖（graph）這個東西比常規的餅圖，條形圖，折線圖等等這些都要難搞一些，專案中會有很多需求，   比如，A和B之間有多重關係能不能畫兩條以上的線？ 這個問題我遇到過，echarts本身就沒有實現兩條線以上這個功能，在官

echarts關係圖節點設定頭像，並使頭像以圓形來顯示！

直接貼出全部程式碼： <!DOCTYPE html> <html style="height: 100%"> <head> <meta name="viewport" content="width=device-width, initial-s

活用echarts關係圖formatter方法，實現同名節點的渲染

echarts關係圖的配置中，有兩個關鍵的資料，data與links，我們在製作關係圖的時候,data陣列中，節點名稱name必須唯一，否則echarts會丟擲 “Cannot set property 'dataIndex' of undefined”的錯誤。但有時我們偏偏需要出現兩個同名的節

教程 | Kaggle網站流量預測任務第一名解決方案：從模型到代碼詳解時序預測

abs rdf reg lock 集成 deep 月份 current 均值 https://mp.weixin.qq.com/s/JwRXBNmXBaQM2GK6BDRqMw 選自GitHub 作者：Artur Suilin 機器之心編譯 參與：蔣思源、路雪、黃小天

【bug】Swiper動態渲染swiper-slide後輪播圖劃不動解決方案

一、問題描述 在開發一個Jquery專案時，用到了Swiper外掛，並且因為要求資料的動態性，所以swiper-wrapper裡面的swiper-silde都是由Jquery動態渲染出來的DOM，結構如圖所示 二、問題分析 在使用上圖結構時，新增靜態資料可以使用Swiper

websocket斷開重連解決方案，基於子慕大詩人部落格修改 健壯強化版

歡迎大家來到Altaba的部落格  2017年11月27日 相信隨著H5的演進，我們越來越多接觸到websocket的使用，本身就使用此技術並不難，但是在開發中會遇到各種無法預測的原因，有瀏覽器相容問題，有後臺的意外斷開，狀態百出。 本人前端開發遇到這樣的問題：websoc

MySql 忘記了密碼，不用重灌解決方案

有些時候，mysql密碼忘了，需要去重灌，但是這樣做比較笨拙。現在給出簡單的解決方案。     （注意裡面的空格和標點符號不要寫錯了，不然不會成功。） 修改mysql密碼操作：  1、把你的mysql服務停掉，用dos進入你的mysql安裝路徑下的bin目錄 2、進入安全模式，不用輸密碼就可以，這樣進

Leetcode 237:刪除連結串列中的節點（最詳細解決方案！！！）

請編寫一個函式，使其可以刪除某個連結串列中給定的（非末尾）節點，你將只被給定要求被刪除的節點。 現有一個連結串列 – head = [4,5,1,9]，它可以表示為: 4 -> 5

Windows7 64位系統中,讀取登錄檔，檔案路勁重定位解決方案

在Windows7 64位系統中,讀取登錄檔，檔案路勁會進行重定位。以下是解決辦法： //第一步：定義巨集 #define KEY_WOW64_64KEY (0x0100) //支援讀寫64位登錄檔

unity3d 重疊面 圖層抖動的解決方案，z-fighting.

其實unity相機的屬性中Clippping Planes  near屬性 和Far屬性 ，使Near儘量的增加，就可以 減少面於面的閃爍抖動的穩定。其實這是openGL的經典問題，由於面之間的距離太近導致的渲染的順序

微信分享時沒有縮圖時的解決方案！

其實之前微信分享都是預設抓取頁面第一張圖片的，後來隨著微信的版本升級，也防止那種誘導式分享，騰訊遮蔽了這一功能，目前僅在PC版本是自動抓取，所以手機版微信分享帶縮圖及簡介的話就要使用jssdk。我之前也是不會，後來網上看到了一大神寫的，參照他的，自己寫了一下這個

Win7資源管理器更新後不斷重啟解決方案

在更新後可能會出現explore自己down掉。 問題簽名: 問題事件名稱: BEX 應用程式名: explorer.exe 應用程式版本: 6.1.7600.16450 應用程式時間戳: 4aeba271 故障模組名稱: fxsst.dll_unloa

Android專案載入後圖標不顯示解決方案

自己寫的程式突然安裝後圖標不見了，在應用程式安裝中能找到，但是桌面上就是沒有圖示，啟動只能從最近列表中其中。。一般這種情況只會在服務類程式和測試程式中出現，因為不需要圖示。 google無果，自己二分除錯解決了，並測試了其他網友提供的其他會出錯原因，大致總結如下： 1、AndroidManifest中app

派生關係中的重名成員的處理（二義性問題）

前面我們介紹了派生與繼承關係，它們把不同的類聯絡在了一起，很容易就產生了一個重名成員的處理問題，我們稱之為“派生關係中的二義性問題”。下面分幾種情形來介紹： 1.基類與派生類間重名成員的處理

【天池大資料競賽】FashionAI全球挑戰賽—服飾屬性標籤識別【決賽第21名解決方案】

        折騰了兩個月的比賽終於結束了，名次出乎了最初的預料        但是也有些許不甘，畢竟前20都有獎勵，尷尬的21名        想想有接近3000支隊伍參賽，好像又心理平衡了不少        比賽其實就是一個分類問題，給定衣服的圖片然後分類到對應的標籤上

微信小程序開發——點擊防重的解決方案

dex 沒有 特殊情況 sel 半透明 dup ports 手機 超過 對於一些涉及後端接口請求的單擊事件，不論後端是否做了請求限制，前端還是有必要進行點擊防重處理的。 這樣既能減少對服務器端的壓力，也能有效防止因重復請求而造成一些不可預期的異常。 尤其是接口請求結果處

微信小程式在ios下Echarts圖表不能滑動的解決方案

問題現象 這個問題的現象說起來很簡單。 小程式頁面中有一篇很長的文章，內部有一個Echarts圖表，手指上下滑動觀看內容。 但是手指滑動區域在Echarts圖表上時，頁面卻不能滑動了。 如下圖： 追蹤問題原因 因為在小程式上渲染圖表用到的是echarts-for-weixin這個元件,而這個元件確實不支援

Echarts圖示寬度變成100px，讓圖表寬度隨著父元素自動適應，Vue實時監聽寬度的變化，這可能是史上最好的解決方案！

最近工作中element後臺管理使用Echarts圖表，本後臺專案分圖表模式和列表模式，使用display控制顯示隱藏，這樣就引出了本文的問題。   問題1：Echarts圖表寬度變成100px？ 問題2：怎麼讓Echarts圖表寬度隨著父元素自動適應？    　　網上對於這兩個

webpack漸入佳境系列一：webpack環境配置與打包基礎【附帶各種 "坑" 與解決方案！持續更新中...】

utf 環境配置 lan 配置 要求 完全 需要 構建 樣式 首先介紹傳統模塊化開發的主流方案： 1.基與CMD的sea.js，玉伯提出的解決方案，據說原來京東團隊在使用。用時才定義，就近加載。最近在瀏覽seajs官方文檔時發現seajs的域名已經在轉賣，驚恐萬分之余又想

Python HTTP庫requests中文頁面亂碼解決方案！

獲得 使用 http text odin 抽取 from Coding blog 把html編碼類型賦與獲取到文本 獲取html編碼類型： 1.使用apparent_encoding可以獲得真實編碼 1 >>> response.apparent_enc