UI设计了一个气泡词云，没有现成的组件，该怎么实现呢？
背景
我们常见的词云图是这样的
ui灵机一动（拍脑袋）设计了这样的词云样式，气泡越大表示词的热度越高。没有现成的组件，该怎么实现呢？
通过查文档发现echarts关系图，如下图所示。外观和我们的要实现的气泡词云有一点像。是否可以基于echarts关系图，通过设置属性来实现气泡词云。
关键属性设置
{ 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调试工具运行，可以查看实现效果。
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 ); } );
作者：邓惠子本尊
链接：https://juejin.cn/post/7022100081541120037