最近封装了一个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 }