echarts 是一款非常優秀的可視化庫,其提供了豐富的圖表類型和強大的交互功能。其中,關系圖(graph)是一種可以展示節點和節點之間關系的圖表類型,在很多場景下都非常適用。
關系圖的基礎數據格式一般是一個節點數組和一個邊數組。節點數組中保存每個節點的基本信息,如 id、name、value 等,而邊數組中保存每兩個節點之間的連線信息,如 source、target 等。
對于 echarts 來說,我們可以使用 option 對象來配置關系圖。下面是一個簡單的 echarts 關系圖示例的 HTML 代碼:
在這段代碼中,我們首先使用<div>
標簽創建了一個用于呈現 echarts 關系圖的畫布,其 ID 為chart
。然后,我們引入了 echarts 的核心庫,之后就可以使用 echarts 的 API 來創建和配置關系圖了。
在選項對象中,我們首先配置了標題和提示組件,之后就是關系圖的具體配置了。這里我們指定了關系圖的類型為graph
,布局方式為force
,同時還設置了邊線的樣式、節點可漫游等等。
最后,我們使用chart.setOption(option)
方法將 echarts 實例與配置項關聯起來,就可以在頁面上看到我們的關系圖了。