EChart 雷达图显示单点tooltip

简介: EChart 雷达图显示单点tooltip

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


相关文章
|
6天前
|
JavaScript
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
31 1
|
10月前
Echarts2.0雷达图tooltip单轴数据
Echarts2.0雷达图tooltip单轴数据
116 0
|
10月前
Echarts组件legend属性显示数据和icon图片自定义的解决方案
Echarts组件legend属性显示数据和icon图片自定义的解决方案
168 0
|
10月前
|
容器
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
layui框架实战案例(14):tabs选项卡切换时echarts拉伸变形无法正常显示的解决方案
109 0
|
8月前
|
索引 容器
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
|
10月前
|
定位技术
Echarts实战案例代码(16):geomap地图散点图和label轮播的解决方案
Echarts实战案例代码(16):geomap地图散点图和label轮播的解决方案
127 0
|
10月前
|
定位技术 数据格式
Echarts实战案例代码(59):geomap实现飞线、散点、引导线以及重叠label的解决
Echarts实战案例代码(59):geomap实现飞线、散点、引导线以及重叠label的解决
336 0
|
JavaScript 前端开发
【曹操】echarts图例legend选中状态动态设置
曹操项目语音质量分析功能前端页面展示,需要对所有指标的图例默认选中状态只显示前两个,其他指标的图例状态默认为灰色。
4453 0
|
6天前
|
数据可视化
Echarts5.3.2可视化案例-时间轴动态柱形图
Echarts5.3.2可视化案例-时间轴动态柱形图
|
10月前
echart时间轴设置详解
时间轴设置详解
357 0