// 数据
var xyear = ["2017", "2018", "2019", "2020", "2021", "2022"]// 年份
var legenddata = ["省部级", "教育部级"]; // 图例，级别类型
var djList = ["二等奖", "三等奖", "一等奖", "二等奖", "一等奖", "优秀奖", "二等奖", "三等奖", "优秀奖", "二等奖", "其他奖", "三等奖", "一等奖", "二等奖", "三等奖", "一等奖", "二等奖", "二等奖", "三等奖", "一等奖"] // 等级类型;
var djgsList = [3, 0, 3, 0, 3, 0, 4, 3, 1, 0, 3, 0] // 等级个数;
var djslList = [8, 10, 4, 41, 21, 1, 1, 1, 2, 12, 4, 5, 2, 5, 2, 3, 1, 7, 1, 4] // 等级数量;
var jbSum = [22, 0, 63, 0, 4, 0, 23, 10, 1, 0, 12, 0]; // 级别总数
let colorList = [["#5B8FF9", ["#7FA5FA", "#ADC6FC", "#DEE9FF", "#EFF3FF"], "#2F467A"], ["#61DDAA", ["#81E3BC", "#B2EED5", "#E2F7EE", "#EFFBF7"], "#21A397"], ["#F6BD16", ["#F9D56A", "#FCE5A1", "#FEF5D7", "#FDF9ED"], "#F6BD16"], ["#FA8974", ["#FCA18F", "#FAC6B9", "#FBE8E2", "#FEF3F1"], "#971E23"]]
// 数据汇总整合
let jbi = 0; // 当前级别位置
let dji = 0; // 当前等级位置
let dataAll = []; // 数据整合列表 [年份：[级别：[等级名字：[],等级数量：[],级别总和：0],[],...],[],...]
xyear.map((item, index) => {
let a = []; // 年份
legenddata.map((i, v) => {
let b = []; // 等级名字
let c = []; // 等级数量
for (let j = dji; j < djgsList[jbi] + dji; j++) {
b.push(djList[j]);
c.push(djslList[j]);
}
a.push([b, c, jbSum[jbi]]);
dji += djgsList[jbi];
jbi++;
})
dataAll.push(a)
});
// 旭日图数据转换
var index = 5 //修改处一：数据索引下标由 0->5
var data = (index) => {
let dataList = [];
dataAll[index].map((item, len) => {
let childList = [];
let jbsum = 0; // 级别总和
item[0].map((v, i) => {
childList.push({
value: item[1][i],
name: v,
label: {
color: colorList[len][2],
},
// 每个子类别 可以单独设置颜色
itemStyle: {
color: colorList[len][1][i]
}
})
jbsum += item[1][i]
})
dataList.push({
name: legenddata[len],
value: jbsum,
label: {
color: "#fff",
},
itemStyle: {
color: colorList[len][0]
},
children: childList
})
})
return dataList;
}
// series数据
let seriesData = [];
let yearSum = []; // 年份总和
dataAll.map((v, i) => {
let a = 0;
v.map((vv, ii) => {
a += vv[2]
})
yearSum.push(a)
})
// 柱状图数据添加
legenddata.map((item, index) => {
let barData = []; // 柱状图数据
dataAll.map((v, i) => {
barData.push(v[index][2]);
})
seriesData.push({
name: item,
type: 'bar',
stack: 'total', // ! 多条数据总计 => 堆叠
barWidth: 16,
color: colorList[index][0],
itemStyle: { borderRadius: 0 },
data: barData,
})
})
// 旭日图数据添加
seriesData.push({
type: "sunburst",
id: 'sunburst',
nodeClick: false, //是否允许旭日图点击 默认可以点击
center: ["80%", "50%"],
radius: ['0%', '40%'],
data: data(index),
// 占据的位置 文字设置
label: {
rotate: "tangential", // 文字水平(tangential)竖直(radial)
color: "#fff",
fontSize: 14,
fontFamily: "Source Han Sans CN-Regular",
minAngle: 30, // 控制角度文本显示
},
// 旭日图的分割线
itemStyle: {
borderColor: "#fff",
borderWidth: 7,
borderRadius: 7
},
tooltip: {
trigger: 'item',
},
levels: [
// 这里是设置 每一层的样式，层级低于单独在data里面的
// 第一个空数据是 占据下钻的位置
{},
// 设置第一层为环形
{
r0: "25%",
r: "40%",
emphasis: {
focus: 'descendant',
},
},
{
r0: "40%",
r: "55%",
emphasis: {
focus: 'none',
},
},
]
})
var getYearTotal = (index) => {
return yearSum[index]
}
option = {
title: {
id: "title",
text: getYearTotal(index) + "个",
textStyle: {
fontSize: 18,
fontFamily: "Source Han Sans CN-Medium",
fontWeight: 500,
color: "rgba(0, 0, 0, 0.85)",
},
subtext: xyear[5] + "年",
subtextStyle: {
fontSize: 16,
fontFamily: "Source Han Sans CN-Regular",
fontWeight: 500,
color: "rgba(0, 0, 0, 0.45)",
},
textAlign:"center",
itemGap:5,
top:"center",
left:"79.5%"
},
legend: {
data: legenddata,
itemWidth: 10,
itemHeight: 10,
top: "12",
left: '24',
itemGap: 20,
textStyle: {
fontSize: 14,
color: "rgba(0, 0, 0, 0.45)",
fontFamily: 'Source Han Sans CN-Regular'
}
},
grid: {
left: '24',
right: '40%',
top: '74',
bottom: '12',
containLabel: true
},
xAxis: {
type: 'category',
data: xyear,
axisTick: {
show: false //隐藏X轴刻度
},
axisLine: {
lineStyle: {
color: 'rgba(204, 204, 204, 1)',
}
},
axisLabel: {
show: true,
fontSize: 14,
color: "rgba(0, 0, 0, 0.65)", //X轴文字颜色
fontFamily: 'Source Han Sans CN-Regular'
},
},
yAxis: {
name: "获奖：个",
type: 'value',
nameTextStyle: {
color: 'rgba(0,0,0,0.65)',
fontSize: 14,
fontFamily: 'Source Han Sans CN-Regular',
align: "left",
verticalAlign: "center",
},
axisLabel: {
color: 'rgba(0,0,0,0.65)',
fontSize: 14,
fontFamily: 'HarmonyOS Sans-Regular'
},
axisLine: {
show: false,
lineStyle: {
color: 'rgba(223, 223, 223, 1)',
}
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: 'rgba(223, 223, 223, 1)',
type: "dashed",
}
}
},
tooltip: {
trigger: 'axis',
triggerOn: "mousemove",
axisPointer: {
type: 'shadow',
shadowStyle: {
color: "rgba(151, 30, 35, 0.1)"
}
},
position: function (point, params, dom, rect, size) { // 提示框位置
let x = 0;
let y = 0;
if (point[0] + size.contentSize[0] + 10 > size.viewSize[0]) {
x = point[0] - size.contentSize[0] - 10
} else {
x = point[0] + 10
}
if (point[1] + size.contentSize[1] + 10 > size.viewSize[1]) {
y = point[1] - size.contentSize[1] - 10
} else {
y = point[1] + 10
}
return [x, y];
},
formatter: params => {
let dataIndex = params[0]?.dataIndex
let childDiv = `<div>`
params.map((item, index) => {
childDiv += `
<div style="margin-top: 8px;">
<span style="font-size: 14px;font-family: Source Han Sans CN-Regular;font-weight: 400;color: #FFFFFF;">${item.seriesName}：${item.value}</span>
</div>
`
})
childDiv += `</div>`;
return `
<div style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:12px;">${xyear[dataIndex]}年获奖${getYearTotal(dataIndex)}个</div>
${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;',
renderMode: 'html',
className: 'tooltip',
order: 'seriesDesc',
},
series: seriesData
};
// 交互
myChart.on('updateAxisPointer', function (event) {
const xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
const index = event.dataIndexInside;
myChart.setOption({
title: {
text: getYearTotal(index) + "个",
subtext: xyear[index] + "年"
},
series: {
id: 'sunburst',
data: data(index),
},
});
}
});