根据角度及距离展示数据信息的图表

概要

根据项目需要开发一种图表，根据航行角度和距离信息展示数据，最终找到echarts中的极坐标和径距离，完成图表

图表完整代码
radarLine.setOption({
title: {
text: “信息雷达图”,
textStyle: {
fontWeight: “bold”,
fontSize: 22,
color: “#000000”,
fontStyle: “normal”
},
show: true,
left: “46%”,
top: “8px”
},
grid: {
// x: 0,
// y: 0,
// x2: 0,
// y2: 0
},
angleAxis: {
max: 360,
min: 0,
axisLabel: {
show: true,
color: “#000000”,
fontSize: 10,
// rotate: 0,
formatter: function (value, index) {
return value + ‘°’;
}
},
splitLine: {
show: true,
lineStyle: {
color: “#cccccc”,
width: 1,
style: “solid”
}
},
axisLine: {
show: true,
lineStyle: {
color: “#cccccc”,
width: 1,
style: “solid”
}
},
show: true,
axisTick: {
show: true,
lineStyle: {
color: “#cccccc”,
width: 1,
style: “solid”
}
}
},
radiusAxis: {
axisLabel: {
show: true,
color: “#000000”,
fontSize: 10,
rotate: 0,
formatter: function (val) {
return val
}
},
axisTick: {
show: false,
lineStyle: {
color: “#cccccc”,
width: 1,
style: “solid”
}
},
axisLine: {
show: false,
lineStyle: {
color: “#cccccc”,
width: 1,
style: “solid”
}
},
splitLine: {
show: true,
lineStyle: {
color: “#cccccc”,
width: 1,
style: “solid”
}
},
},
polar: {},
series: [
{
name: “”,
type: “line”,
data: [0,0,0,0,0,0,0],
coordinateSystem: “polar”,
}
],
legend: {
show: true,
data: [],
textStyle: {
color: “#000000”,
fontSize: 10
},
left: “center”,
bottom: “8px”,
orient: “horizontal”,
icon: “circle”,
pageIconColor: “#000000”,
pageIconInactiveColor: “#8c8c8c”
},
color: [
“#017AFF”,
“#62BA46”,
“#FFC601”,
“#F7821B”,
“#FF5257”,
“#F74F9E”,
“#CC9494”,
“#955FBC”,
“#A55057”
],
tooltip: {
show: true,
trigger: “item”,
confine: true,
textStyle: {
fontSize: 18,
color: “#000000”
},
formatter: function (params) {
return “展示1：” + params.value[1] + “°
展示2：” + params.value[5] + “°
展示3：” + params.value[3] + “°
展示4” + params.value[0] + “m
展示5：” + params.value[2] + “m
展示6：” +params.value[4] + “km/h
展示7：” + params.value[6]
},
}
});

技术细节

` 提示：这里主要用到 echarts中的radiusAxis和angleAxis