/* 数据 */ let nameList = ["中国", "美国", "英国", "法国", "俄罗斯", "新加坡", "泰国", "菲律宾", "印度尼西亚", "韩国", "日本"]; let valueList = [1000, 100, 90, 80, 70, 60, 50, 40, 30, 20, 10]; /* 整合 */ let maxNum = Math.max(valueList); // 最大值 // 样式 let maxColor = "#73A0FB"; // 最大值颜色 let maxFontSize = 20; // 最大值字号 let colorList = ['#73DEB4', '#F9CA41', '#2F467A', '#F98973', '#F98973']; // 颜色系列 let fontSizeList = [16, 14, 12, 10]; // 字号系列 let data = []; // 添加数据 data.push({ name: nameList[0], value: valueList[0], label: { color: maxColor, fontSize: maxFontSize }, }) // 数组四等分 let currentIndex = 0; for (let i = 1; i < nameList.length; i += Math.floor(nameList.length / 4)) { for (let j = i; j < i + Math.floor(nameList.length / 4); j++) { data.push({ name: nameList[j], value: valueList[j], label: { color: colorList[currentIndex], fontSize: fontSizeList[currentIndex] } }) } currentIndex++; } /* 函数 */ // 数字分割：1653 => 1,653 const formatNum = (value) => { if(!value&&value!==0) return 0; let str = value.toString(); let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g; return str.replace(reg,"$1,"); } option = { color: colorList, tooltip: { trigger: 'item', axisPointer: { type: 'none' }, position: function (point, params, dom, rect, size) { // 提示框位置 let x = 0; let y = 0; //提示框定位 if (point[0] + size.contentSize[0] < size.viewSize[0]) { x = point[0] } else if (point[0] > size.contentSize[0]) { x = point[0] - size.contentSize[0] } else { x = "30%" } if (point[1] > size.contentSize[1]) { y = point[1] - size.contentSize[1] } else if (point[1] + size.contentSize[1] < size.viewSize[1]) { y = point[1] } else { y = "30%" } return [x, y]; }, formatter: params => { let pieColor = params.data.label["color"]; return `

${params.name}

${formatNum(params.value)}人

` }, extraCssText: 'opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;' }, series: [ { type: 'graph', layout: 'force', force: { repulsion: 50, // 斥力 gravity: 0.05, edgeLength: [10, 80], layoutAnimation: false, // 不展示牵引动画 }, roam: false, symbol: '', symbolSize: 0, label: { show: true, color: 'auto', }, draggable: false, itemStyle: { color: "rgba(225,225,225,0)" }, data: data } ] }

关系图实现词云效果