/* 数据 */
// 饼图
const pieName = ["常任职教师", "常任教职"]; // 类型
const pieValue = [648, 324]; // 数量
// 柱状图
const barName = ["正高级", "副高级", "中级", "初级", "其他", "正高级", "初级", "其他"]; // 类型
const barValue = [150, 120, 100, 180, 98, 124, 100, 100]; // 数量
const barNum = [5, 3]; // 柱子数量
/* 容器渲染 */
// EUI.include("vfs/root/echarts/echarts5.js");
// var chartDom = document.getElementById('HHH17');
// var myChart = echarts.init(chartDom);
/* 数据整合 */
let pieData = []; // 饼图数据
let barData = []; // 柱状图数据
let currentIndex = 0; // 当前岗位下标
const colorPie = ["#73A0FB", "#73DEB4", "#2F467A", "#FACA42", "#F98973"];// 饼图颜色系列
pieName.map((item, index) => {
// 饼图数据整合
pieData.push({
name: item,
value: pieValue[index]
})
// 柱状图数据整合
let list = [];
for (let i = currentIndex; i < currentIndex + barNum[index]; i++) {
list.push({
name: barName[i],
value: barValue[i],
})
}
currentIndex += barNum[index]
barData[item] = list
})
/* 函数 */
// 数字分割：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,");
}
//获取当前类型的柱状图数据
const getBarData = (type) => {
return barData[type]
};
// 获取当前类型x轴数据
const getXData = (type) => {
let list = barData[type];
return list.map(item => item.name)
}
/* 当前数据 */
// 柱状图当前数据
let currentBarData = getBarData(pieName[0]);
// 当前类型
let currentType = pieName[0]
// 当前x轴数据
let xData = getXData(pieName[0]);
// 当前柱子颜色
let barColor = colorPie[0]
/* series整合 */
let seriesData = [];
// 饼图
seriesData.push({
name: "pie",
id: "pie",
type: "pie",
left: "16",
top: "center",
width: "35%",
color: colorPie,
label: { show: false },
itemStyle: {
borderColor: "#fff",
borderWidth: 2
},
radius: ['80%', '100%'],
data: pieData,
tooltip: {
formatter: params => {
let pieColor = params.color;
return `
<div style="position:relative;">
<div style="width: 9px;height: 9px;background: ${pieColor};border: 1px solid #FFFFFF;position:absolute;top:50%;transform:translateY(-50%);left:0;border-radius:50%;"></div>
<span style="margin:0 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 400;color: #FFFFFF;">${params.name}</span>
</div>
<div style="margin:12px 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Regular;font-weight: 500;color: #FFFFFF;">${formatNum(params.value)}人<span style="margin-left:24px;">${params.percent}%</span></div>
`
},
}
});
// 柱状图
seriesData.push({
name: "bar",
id: "bar",
type: "bar",
data: currentBarData,
itemStyle: {
color: barColor,
borderRadius: [2, 2, 0, 0]
},
barWidth: 12,
tooltip: {
formatter: params => {
let pieColor = params.color;
return `
<div style="position:relative;">
<div style="width: 9px;height: 9px;background: ${pieColor};border: 1px solid #FFFFFF;position:absolute;top:50%;transform:translateY(-50%);left:0;border-radius:50%;"></div>
<span style="margin:0 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 400;color: #FFFFFF;">${params.name}</span>
</div>
<div style="margin:12px 0 0 15px;font-size: 14px;font-family: Source Han Sans CN-Regular;font-weight: 500;color: #FFFFFF;">${formatNum(params.value)}人</div>
`
},
}
})
option = {
grid: {
left: "40%",
right: "16",
bottom: "16",
containLabel: true,
},
title: {
text: `{bm| ${currentType}}{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: "40%",
top: 0
},
graphic: [
{
type: 'image',
top: "center",
left: "39%",
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="
}
},
{
type: "group",
x: 16,
top: 6,
children: [
{
type: "text",
silent: true, // 不响应鼠标
top: 'middle',
left: 0,
style: {
text: "常任职教师数量",
font: '12px "Source Han Sans CN-Regular"',
fill: "rgba(0, 0, 0, 1)",
}
},
{
type: "text",
silent: true, // 不响应鼠标
top: 'middle',
left: 92,
style: {
text: pieValue[0] + "人",
font: '16px "HarmonyOS Sans-Medium"',
fill: "rgba(151, 30, 35, 1)",
}
},
]
},
{
type: "group",
x: 16,
top: 22,
children: [
{
type: "text",
silent: true, // 不响应鼠标
left: 0,
top: 32,
style: {
text: "常任教职人数",
font: '12px "Source Han Sans CN-Regular"',
fill: "rgba(0, 0, 0, 1)"
}
},
{
type: "text",
silent: true, // 不响应鼠标
left: 92,
top: 30,
style: {
text: pieValue[1] + "人",
font: '16px "HarmonyOS Sans-Medium"',
fill: "rgba(151, 30, 35, 1)"
}
}
]
},
],
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];
},
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;'
},
xAxis: {
type: 'category',
data: xData,
axisTick: {
show: false //隐藏X轴刻度
},
axisLine: {
lineStyle: {
color: "#CCCCCC"
}
},
axisLabel: {
show: true,
color: 'rgba(0,0,0,0.65)',
fontSize: 14,
fontFamily: 'Source Han Sans CN-Regular',
},
},
yAxis: [{
type: 'value',
name: "单位：人",
nameTextStyle: {
color: 'rgba(0,0,0,0.65)',
fontSize: 14,
fontFamily: 'Source Han Sans CN-Regular',
align: "left",
verticalAlign: "center",
},
boundaryGap: ['0%', '20%'],
axisLabel: {
fontSize: 14,
color: 'rgba(0,0,0,0.65)',
fontFamily: 'HarmonyOS Sans-Regular',
},
axisLine: {
show: false,
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: 'rgba(223, 223, 223, 1)',
type: "dashed",
}
}
}],
series: seriesData
};
// option && myChart.setOption(option);
// 事件
myChart.on("mouseover", "series.pie", (param) => {
console.log(param)
let index = param.dataIndex;
// 改变当前数据
currentType = pieName[index];
currentBarData = getBarData(pieName[index]);
xData = getXData(pieName[index]);
barColor = colorPie[index];
// 改变option
myChart.setOption({
title: {
text: `{bm| ${currentType}}{txt|职称级别分布}`,
},
xAxis: {
data: xData
},
series: [{
id: 'bar',
data: currentBarData,
itemStyle: {
color: barColor,
},
}],
});
})