getEcharts() {
var chart = this.$echarts.init(this.$refs.radarMapRef);
const dataList = [
{
name: "你的账号",
data: [
{ name: "播放量", value: 672, unit: "万" },
{ name: "互动率", value: 0.5, unit: "%" },
{ name: "投稿数", value: 40, unit: "" },
{ name: "粉丝净增", value: 77, unit: "" },
{ name: "完播率", value: 20, unit: "%" },
],
color: "#587df7",
},
{
name: "同类账号",
data: [
{ name: "播放量", value: 255, unit: "" },
{ name: "互动率", value: 3, unit: "%" },
{ name: "投稿数", value: 2, unit: "" },
{ name: "粉丝净增", value: 2, unit: "" },
{ name: "完播率", value: 11.2, unit: "%" },
],
color: "#f1a376",
},
];
const indicator = [
{ name: "播放量", max: 870 },
{ name: "互动率", max: 4 },
{ name: "投稿数", max: 40 },
{ name: "粉丝净增", max: 77 },
{ name: "完播率", max: 25 },
];
// 构建单个学生的系列数据
const buildSeriesForStudent = (studentData, studentIndex) => {
const data = studentData.data.map((item) => item.value);
const helper = data.map((item, index) => {
const arr = new Array(data.length).fill(0);
arr[index] = item;
return arr;
});
return [data, ...helper].map((item, index) => {
return {
name: studentData.name,
max: item.max,
type: "radar",
symbol: index === 0 ? "circle" : "none",
symbolSize: 5,
itemStyle: {
color: "#fff",
borderColor: index === 0 ? studentData.color : "transparent", // 标记边框颜色
borderWidth: 1, // 标记边框宽度
},
lineStyle: {
color: index === 0 ? studentData.color : "transparent",
},
areaStyle: {
// 设置径向渐变
color: {
type: "radial",
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [
{
offset: 0,
color: "transparent", // 中心颜色，使用学生数据的颜色
},
{
offset: 1,
color: studentData.color, // 边缘颜色，透明
},
],
global: false, // 缺省为 false
},
opacity: 0.1,
},
tooltip: {
show: index === 0 ? false : true,
formatter: () => {
let res =
`<span style="color:#666;font-size:12px;padding-left:10px;">${
indicator[index - 1].name
}</span>` + "：<br>";
for (let x of dataList) {
let str = `<span style="color:#666;font-size:12px;padding:10px;"><i style="display: inline-block;width: 8px;height: 8px;background: ${
x.color
};margin-right: 5px;border-radius: 50%;"></i> ${x.name}： ${
x.data[index - 1].value
}${x.data[index - 1].unit}<br></span>`;
res += str;
}
return `<div style=" box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);border-radius:4px;padding:5px;" >${res}</div>`;
},
},
z: index === 0 ? 1 : 2,
data: [item],
};
});
};
// 构建所有学生的系列数据
const series = dataList.flatMap((studentData, index) =>
buildSeriesForStudent(studentData, index)
);
let option = {
tooltip: {
trigger: "item",
backgroundColor: "rgb(255,255,255)",
textStyle: {
color: "#333", // 修改为深色以便查看
},
},
color: ["#ff5a2c", "#6776ff"],
radar: {
shape: "circle",
indicator: indicator,
radius: 66,
splitArea: {
// 'show': false
areaStyle: {
color: "transparent", // 每个圆的背景颜色
shadowColor: "#32dadd", // 每个圈的阴影颜色
shadowBlur: 10,
},
},
name: {
formatter: function (value, indicator) {
// 查找对应的数据项
let yourAccountData = dataList[0].data.find(
(item) => item.name === indicator.name
);
let similarAccountData = dataList[1].data.find(
(item) => item.name === indicator.name
);
return [
`{a|${value}}`,
`{b|${yourAccountData.value}${yourAccountData.unit}}/{c|${similarAccountData.value}${similarAccountData.unit}}`,
].join("\n");
},
rich: {
a: {
align: "center",
fontSize: 14,
lineHeight: 22,
color: "#333",
fontWeight: "bold",
padding: [0, 0, 10, 0],
},
b: {
align: "center",
fontSize: 13,
lineHeight: 22,
fontWeight: "bold",
color: "#4C7DFF",
},
c: {
align: "center",
fontSize: 13,
lineHeight: 22,
fontWeight: "bold",
color: "#FF8C4C",
},
},
},
// legend: {
// data: dataList.map((item) => ({
// name: item.name,
// icon: "circle", // 图例的图标形状
// textStyle: {
// color: "#333", // 设置图例文本颜色
// },
// itemStyle: {
// color: item.color, // 设置图例图标的颜色
// },
// })),
// bottom: 0,
// left: "center",
// textStyle: {
// color: "#333", // 设置图例文本颜色
// },
// itemWidth: 10,
// itemHeight: 10,
// },
},
series: series,
};
chart.setOption(option);
const handleResize = () => {
chart.resize();
};
window.addEventListener("load", handleResize);
window.addEventListener("resize", handleResize);
// 可以在组件销毁时解绑事件，避免内存泄漏
// 假设在 Vue 组件中，可以在 beforeDestroy 钩子中执行
this.$once("hook:beforeDestroy", () => {
window.removeEventListener("load", handleResize);
window.removeEventListener("resize", handleResize);
});
},
