/* 数据 */
// 矩形树图
const bmName = ["消防指挥", "信息技术", "会计学", "外国语言与外国历史"]; // 部门名称
const bmValue = [100, 50, 80, 60]; // 部门人数
// 饼图
const gwName = ["行政岗", "专任教师岗", "科学研究岗", "双肩挑岗位", "其他", "行政岗", "专任教师岗", "其他", "科学研究岗", "其他", "其他"]; // 岗位名称
const gwValue = [209, 180, 169, 136, 125, 150, 50, 50, 150, 50, 60]; // 岗位人数
const gwPrecent = [35, 25, 20, 12, 8, 60, 20, 20, 75, 25, 100]; // 岗位人数占比
const gwNum = [5, 3, 2, 1]; // 部门对应岗位数
/* 整合 */
// 颜色系列
const colorSelectList = ["rgba(115, 160, 251, 1)", "rgba(249, 202, 65, 1)", "rgba(115, 222, 180, 1)", "rgba(249, 137, 115, 1)"]
const colorTreemap = ["rgba(115, 160, 251, 0.25)", "rgba(249, 202, 65, 0.25)", "rgba(115, 222, 180, 0.25)", "rgba(249, 137, 115, 0.25)"]
const colorPie = ["#73A0FB", "#73DEB4", "#2F467A", "#FACA42", "#F98973"];
// 矩形树图
let treeMapData = [];
bmName.map((item, index) => {
treeMapData.push({
name: item,
value: bmValue[index],
itemStyle: {
color: colorTreemap[index]
},
select: {
itemStyle: {
color: colorSelectList[index]
}
},
})
});
// 饼图
let pieData = {};
let currentIndex = 0; // 当前岗位下标
bmName.map((item, index) => {
let list = [];
for (let i = currentIndex; i < currentIndex + gwNum[index]; i++) {
list.push({
name: gwName[i],
value: gwValue[i],
precent: gwPrecent[i]
})
}
currentIndex += gwNum[index]
pieData[item] = list
})
/* 函数 */
//获取当前部门的饼图数据
const getPieData = (bm) => {
return pieData[bm]
};
// 获取当前岗位的legend数据
const getLegendData = (bm) => {
let pieData = getPieData(bm);
return pieData.map(item => item.name)
}
/* 当前数据 */
// 饼图当前数据
let currentPieData = getPieData(bmName[0]);
// 当前部门
let currentBm = bmName[0]
/* series数据 */
let seriesData = [];
// 树图series
seriesData.push({
name: "treemap",
id: "treemap",
type: 'treemap',
data: treeMapData,
roam: false,//拖拽漫游（移动和缩放）
nodeClick: false, // 节点点击
breadcrumb: false, // 面包屑
width: "45%",
left: "16",
top: 300,
bottom: 300,
label: {
show: true,
position: [16, 16],
formatter: function (params) {
return `{name|${params.name}}\n{value|${params.value}人}`
},
rich: {
name: {
fontSize: 12,
fontFamily: "Source Han Sans CN-Regular",
color: "#fff",
},
value: {
fontSize: 24,
fontFamily: "HarmonyOS Sans-Medium",
color: "#fff",
padding: [10, 0, 0, 0]
}
},
},
selectedMode: "single",
itemStyle: {
borderWidth: 2,
boderColor: "#fff"
},
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] - size.contentSize[0]
} else {
x = point[0]
}
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 => {
return `
<div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:12px;">${params.name}</div>
<div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;">部门在岗在编人数：${params.value}人</div>
`
},
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
seriesData.push({
name: "pie",
id: "pie",
type: "pie",
left: "40%",
top: "center",
width: "45%",
color: colorPie,
label: { show: false },
radius: ['30%', '40%'],
data: currentPieData
})
option = {
graphic: {
type: 'image',
top:"center",
left:"48%",
style:{
image:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAOhJREFUOE9jZGBgYJgho6Sa8eTebRCbWMAIUjhdTnkHw3+GU8KP7zaGMTD8JUYzQiMDgzsDA8MDhv8MjZmP7y4gpBldI0z9Psb//xozHt8/hMsAXBph6uew/GVsTH165wm6AYQ0gtT/ZGRgbMx4dKcdWTMxGmHqr//7z9CY/fjuSpAAKRohBvxnaM18fLeGeI2MDMuZmf83pN27d4soG/8z/j/JwMDYmPXw7nbi/MjI8Po/WMOdqdiiBKtT/zP+7/vDytSYd+fOJ6LikZGRYcNfRqbG7Ae3LxCdchgZ/8/KeHhvHSENMHkAvNRhD4R/LDUAAAAASUVORK5CYII="
}
},
title: {
text: `{bm| ${currentBm}}{txt|在岗在编岗位系列人员分布}`,
textStyle: {
rich: {
bm: {
color: 'rgba(151, 30, 35, 1)',
fontFamily: 'Source Han Sans CN-Regular',
fontSize: 14,
},
txt: {
color: 'rgba(0, 0, 0, 0.85)',
fontFamily: 'Source Han Sans CN-Regular',
fontSize: 14,
padding: [0, 0, 0, 8]
}
}
},
backgroundColor: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [{
offset: 0, color: 'rgba(151, 30, 35, 0.2)' // 0% 处的颜色
}, {
offset: 1, color: 'rgba(151, 30, 35, 0)' // 100% 处的颜色
}],
global: false // 缺省为 false
},
left: "52%",
top: "270"
},
tooltip: {},
legend: {
type: "scroll",
orient: 'vertical',
//height: '80%',
right: '16',
top: 'center',
icon: "circle", //设置为圆，删除则为矩形
itemWidth: 6,
itemHeight: 6,
itemGap: 25,
data: getLegendData(bmName[0]),
formatter: function (params) {
console.log(currentPieData)
for (var i = 0; i < currentPieData.length; i++) {
if (params === currentPieData[i].name) {
return '{name|' + params + '}{value|' + currentPieData[i].value + '人}{rate|' + currentPieData[i].precent + '%}'
}
}
},
textStyle: {
rich: {
name: {
fontSize: 14,
fontWeight: 400,
width: 80,
//height: 20,
padding: [0, 0, 0, 5],
color: 'rgba(0, 0, 0, 0.65)',
fontFamily: 'Source Han Sans CN-Regular',
},
rate: {
fontSize: 14,
fontWeight: 500,
//height: 20,
width: 50,
align: 'right',
color: 'rgba(0, 0, 0, 0.85)',
fontFamily: 'Source Han Sans CN-Medium',
},
value: {
fontSize: 14,
fontWeight: 500,
//height: 20,
width: 50,
align: 'right',
color: 'rgba(0, 0, 0, 0.85)',
fontFamily: 'Source Han Sans CN-Medium',
}
}
}
},
series: seriesData
};
// 设置默认选中
setTimeout(() => {
myChart.dispatchAction({
type: 'select',
seriesName: "treemap",
name: bmName[0]
})
}, 50)
// 点击事件
myChart.on("click", "series.treemap", (param) => {
let seriesName = param.seriesName; // seriesName
let index = param.dataIndex - 1;
currentPieData = getPieData(bmName[index]);
currentBm = bmName[index];
myChart.setOption({
title: {
text: `{bm| ${currentBm}}{txt|在岗在编岗位系列人员分布}`,
},
series: [{
id: 'pie',
data: currentPieData,
}],
});
myChart.dispatchAction({
type: 'select',
seriesName: "treemap",
name: bmName[index]
})
})