echarts 雷达图配置
<div class="radarMap" ref="radarMapRef"></div>
radar 配置
| radar |
构建指示器和雷达图的样式配置 |
具体配置说明 |
| shape |
雷达图的形状 |
取值为 “circle” 表示雷达图的形状为圆形。 |
| indicator |
雷达图的指示器 |
这里未给出具体值，通常是一个数组，每个元素代表一个指标的配置，用于定义雷达图的坐标轴。 |
| radius |
雷达图的半径 |
值为 66，表示雷达图的半径大小。可以是具体像素值，也可以是百分比 |
| splitArea |
雷达图的分割区域配置 |
areaStyle:分割区域的样式;color:每个圆的背景颜色;shadowColor:每个圈的阴影颜色;shadowBlur:阴影的模糊程度 |
| name |
雷达图指示器名称的配置 |
|
| name.formatter |
指示器名称的格式化函数 |
该函数接收 value（指示器名称）和 indicator（指示器对象）作为参数。函数内部通过查找 dataList 数组中的数据，将当前指标的名称、你的账户数据值和单位、相似账户数据值和单位进行格式化，返回一个包含这三部分信息的数组，通过 \n 连接成多行文本。 |
| name.rich |
富文本样式配置 |
a:指示器名称的样式;b:你的账户数据值的样式;c:相似账户数据值的样式 |
series配置
| series |
配置项用于定义 ECharts 图表中的系列，这里通过 flatMap 方法和 buildSeriesForStudent 函数为每个数据生成雷达图系列。每个数据会生成一个主系列和多个辅助系列，主系列用于展示整体数据，辅助系列用于在鼠标悬停时显示每个指标的详细信息。 |
描述 |
| name |
系列的名称 |
用于在图例、提示框等地方显示。 |
| type |
图表类型 |
设置为 “radar” 表示使用雷达图 |
| symbol |
标记的类型 |
就是折线上的小圆点,当 index === 0 时为 “circle” 表示圆形标记，其他情况为 “none” 表示不显示标记。 |
| symbolSize |
标记的大小 |
设置为 5 |
| color |
标记的填充颜色 |
设置为 “#fff” 即白色。 |
| borderColor |
标记的边框颜色 |
当 index === 0 时dataList的颜色，其他情况为 “transparent” 即透明。 |
| lineStyle |
线条的样式配置。 |
设置颜色 color ;区域设置areaStyle |
| tooltip |
提示框的配置。 |
|
| z |
系列的 z 轴值，当 index === 0 时为 1，其他情况为 2，用于控制系列的层叠顺序。 |
|
| data |
系列的数据，这里是一个包含单个元素的数组，元素为处理后的数据。 |
|
|
|
|
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,
},
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: {
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",
},
},
},
},
series: series,
};
chart.setOption(option);
const handleResize = () => {
chart.resize();
};
window.addEventListener("load", handleResize);
window.addEventListener("resize", handleResize);
this.$once("hook:beforeDestroy", () => {
window.removeEventListener("load", handleResize);
window.removeEventListener("resize", handleResize);
});
},
注销图表
let chart = this.$echarts.init(this.$refs.audiencePreferenceRef);
this.$echarts.dispose(chart);