最近封装了一个EChart 雷达图方法,效果如图:
代码如下:
/**
*
* @param {array} ydata 各方向频率值,暂定8个方向,
* @param {string} name 名称,
* @param {string} month 月份,
* @returns 风玫瑰图option
*/
export async function windRose(ydata, name, month) {
let newydata
if (!ydata) {
newydata = [0, 0, 0, 0, 0, 0, 0, 0]
} else {
newydata = ydata[month]
}
var max = Math.max(...newydata)
max = max === 0 ? '1' : max
const indicator = [{
name: '北',
max
},
{
name: 'a',
max
},
{
name: '西',
max
},
{
name: 'b',
max
},
{
name: '南',
max
},
{
name: 'c',
max
},
{
name: '东',
max
},
{
name: 'd',
max
},
]
const buildSeries = function (ydata,yname) {
const data = ydata;
const helper = data.map((item, index) => {
const arr = new Array(data.length);
arr.splice(index, 1, item);
return arr;
});
return [data, ...helper].map((item, index) => {
return {
name: yname,
type: "radar",
symbol: index === 0 ? "circle" : "none",
symbolSize: 4,
itemStyle: {
color: "#fff",
},
lineStyle: {
color: index === 0 ? "#fac858" : "transparent",
},
areaStyle: {
color: index === 0 ? "#fac858" : "transparent",
opacity: 0.5,
},
tooltip: {
show: index === 0 ? false : true,
formatter: () => {
let res = indicator[index - 1].name + ":<br>";
let str =
'<i style="display: inline-block;width: 10px;height: 10px;background: ' +
"#fac858" +
';margin-right: 5px;border-radius: 50%;}"></i>' +
yname +
":" +
ydata[index - 1] +
'%' +
"<br>";
res += str;
return res;
},
},
z: index === 0 ? 1 : 2,
data: [item],
};
});
};
const series = [];
series.push(...buildSeries(newydata,name))
let option = {
tooltip: {},
radar: {
indicator: indicator,
},
series: series,
};
return option
}