initRadar() {
let chartDom = this.$refs.radar;
let myChart = echarts.init(chartDom);
let i = -1;
// 获取数据
let arr1 = [75, 1.50, 87, 84, 98.3]
let option = {
legend: {
show: true,
data: ["Allocated Budget", "Actual Spending"],
},
radar: {
center: ["50%", "50%"],
splitNumber: 5,
radius: 80,
indicator: [
{ name: "平均车辆在线率", max: 100, color: "rgba(255, 255, 255, 0.88) " },
{ name: "时间错乱比例", max: 100, color: "rgba(255, 255, 255, 0.88) " },
{ name: "数据留存率", max: 100, color: "rgba(255, 255, 255, 0.88) " },
{ name: "数据一致性", max: 100, color: "rgba(255, 255, 255, 0.88) " },
{ name: "有效数据比例", max: 100, color: "rgba(255, 255, 255, 0.88) " },
],
axisLine: {
// (圆内的几条直线)坐标轴轴线相关设置
lineStyle: {
color: "#383d6a",
// 坐标轴线线的颜色。
width: 1,
// 坐标轴线线宽。
type: "solid",
// 坐标轴线线的类型。
},
},
splitLine: {
// (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
lineStyle: {
color: "#383d6a",
// 分隔线颜色
width: 2,
// 分隔线线宽
},
},
splitArea: {
// 坐标轴在 grid 区域中的分隔区域,默认不显示。
show: true,
areaStyle: {
// 分隔区域的样式设置。
color: ["rgba(19, 25, 78)"],
// 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
},
},
name: {
rich: {
a: {
color: 'rgba(255, 255, 255, 0.88)',
lineHeight: 20
},
b: {
color: '#fff',
align: 'center',
backgroundColor: '#666',
padding: 2,
borderRadius: 4
}
},
formatter: (a,b) => {
i++;
return `{a|${a}}\n{b|${arr1[i]}%}`
}
}
},
series: [
{
type: "radar",
itemStyle: {
opacity: 0,
},
areaStyle: {
color: "#02FFFB",
},
data: [
{
value: arr1,
label: {
normal: {
show: true,
formatter: function (params) {
return params.value;
}
}
}
},
],
},
],
color: ["#06b0bf"],
};
option && myChart.setOption(option);
},