/* 数据 */ let jbList = ["中青年教书", "其他"]; // 年龄段 let djgsList = [3, 3]; // 年龄段类型数 let djList = ["<35岁", "35-40岁", "41-45岁", "46-50岁", "51-55岁", ">55岁"]; // 类型 let djslList = [25, 27, 63, 25, 65, 76]; // 类型对应人数 let jbslList = [115, 166]; // 年龄段总人数 /* 整合 */ 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] } 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 parentName = params.treePathInfo[1].name; // 类别 let pieColor = params.color; console.log(params) 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%', '100%'], sort: "null", data: data, // 占据的位置文字设置 label: { rotate: "tangential", // 文字水平(tangential)竖直(radial) color: "#fff", fontSize: 14, minAngle: 30, // 控制角度文本显示 }, // 旭日图的分割线 itemStyle: { borderColor: "#fff", borderWidth: 7, borderRadius: 7 }, levels: [ // 这里是设置每一层的样式，层级低于单独在data里面的 // 第一个空数据是占据下钻的位置 {}, // 设置第一层为环形 { r0: "30%", r: "50%", emphasis: { focus: 'descendant', }, }, { r0: "50%", r: "70%", emphasis: { focus: 'none', }, }, ] }] };

Echarts在线免费图表