// 数据，最好排序处理下 let jbList = ["国家级","其他","省部级"]; // 级别 let djgsList = [3,1,4]; // 等级个数 let djList = ["重大","重点","非重点","其他","其他","委托","招标","重大"]; // 等级 let djslList = [25,27,363,25,165,176,343,8]; // 等级数量 let jbslList = [415,25,692]; // 级别总数 let colorList = [["#5B8FF9","#ADC6FC","#2F467A"],["#61DDAA","#B2EED5","#21A397"],["#F6BD16","#F4E6BB","#F6BD16"]] let data = []; let j = 0; jbList.map((item,index) => { let childList = []; for(let i =0;i < djgsList[index];i++){ childList.push({ value: djslList[j], name: djList[j], // 每个子类别可以单独设置颜色 itemStyle: { color: colorList[index][1] }, label:{ color: colorList[index][2] } }) j++; } data.push({ name: item, value: jbslList[index], itemStyle: { color: colorList[index][0] }, children:childList }) }) option = { tooltip: { show: true, 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] - size.contentSize[0] }else { x = point[0] } if(point[1] + size.contentSize[1] > size.viewSize[1]){ y = point[1] - size.contentSize[1] }else { y = point[1] } return [x, y]; }, formatter: params => { // 自定义提示框 let parentName = params.treePathInfo[1].name; // 类别 let childData = data.filter(item => {return item.name == parentName;})[0].children let childDiv = `

` childData.map((item,index) => { childDiv += `

${item.name}：${item.value}项

` }) childDiv += `

`; return `

${parentName}

${childDiv} ` }, 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: "sunburst", nodeClick: false, //是否允许旭日图点击默认可以点击 center: ["50%", "50%"], radius: ['0%', '90%'], data: data, // 占据的位置文字设置 label: { rotate: "tangential", // 文字水平(tangential)竖直(radial) color: "#fff", fontSize: 14, minAngle:30, // 控制角度文本显示 }, // 旭日图的分割线 itemStyle: { borderColor: "#fff", borderWidth: 7, borderRadius: 7 }, levels: [ // 这里是设置每一层的样式，层级低于单独在data里面的 // 第一个空数据是占据下钻的位置 {}, // 设置第一层为环形 { r0: "45%", r: "65%", emphasis: { focus: 'descendant', }, }, { r0: "65%", r: "85%", emphasis: { focus: 'none', }, }, ] }] };

旭日图01