UI設計了一個氣泡詞雲,沒有現成的元件,該怎麼實現呢?

語言: CN / TW / HK

背景

我們常見的詞雲圖是這樣的

image.png

ui靈機一動(~~拍腦袋~~)設計了這樣的詞雲樣式,氣泡越大表示詞的熱度越高。沒有現成的元件,該怎麼實現呢?

image.png

通過查文件發現echarts關係圖,如下圖所示。外觀和我們的要實現的氣泡詞雲有一點像。是否可以基於echarts關係圖,通過設定屬性來實現氣泡詞雲。 image.png

關鍵屬性設定

js { type: 'graph',//用於展現節點以及節點之間的關係資料。 layout: 'force',//採用力引導佈局 force: { repulsion: 60,//節點之間的斥力因子。 edgeLength: 10//兩個節點之間的距離 }, data: { name: node.label,//節點名字 symbolSize: node.size*1.5,//節點大小 itemStyle: {//節點的顏色,邊框大小,邊框顏色 color: bgcolor, borderColor: color, borderWidth: node.size/20,//邊框大小需要根據標籤權值動態調整 }, label: {//標籤顯示屬性,標籤顏色/標籤字型大小 show: true, fontSize: node.size/4,//,標籤大小需要根據標籤權值動態調整 color: '#fff', }, } }

示例展示

將程式碼複製到echarts除錯工具執行,可以檢視實現效果。

image.png ```js var rindex = () => parseInt(Math.random() * 100) % 7; var mycolor = () => ['#0239bf', '#3cd272', '#f7b500', '#eac900', '#00d0ff', '#00b4c0', '#2c9d68'][rindex()]; var backgroundColor = () => ['rgba(2,57,191, 0.4)', 'rgba(60,210,114, 0.4)', 'rgba(247,181,0,0.4)', 'rgba(234,201,0,0.4)', 'rgba(0,208,255,0.4)', 'rgba(0,180,192,0.4)', 'rgba(44,157,104,0.4)'][rindex()]

myChart.showLoading(); $.getJSON( ROOT_PATH + '/data/asset/data/npmdepgraph.min10.json', function (json) { myChart.hideLoading(); myChart.setOption( (option = { animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut', series: [ { layout: 'force', force: { repulsion: 60, edgeLength: 10 }, type: 'graph', // progressiveThreshold: 700, data: json.nodes.filter(item => item.size > 15).map(function (node) { let color = mycolor(); let bgcolor = backgroundColor(); return { id: node.id, name: node.label, symbolSize: node.size*1.5, itemStyle: { color: bgcolor, borderColor: color, borderWidth: node.size/20, }, label: { show: true, fontSize: node.size/4, color: '#fff', }, }; }), zoom: 1, center: ['50%', '50%'], roam: true, edgeSymbol: ['circle', 'arrow'], } ] }), true ); } ); ```