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
}


相关文章
Echarts2.0雷达图tooltip单轴数据
Echarts2.0雷达图tooltip单轴数据
408 0
ECharts 提示框组件Tooltip属性大全(包含文本注释)
ECharts 提示框组件Tooltip属性大全(包含文本注释)
1157 0
|
SQL 关系型数据库 MySQL
MySQL 8.0报错--1118-Row size too large. The maximum row size for the used table type, not counting BLOBs,is 8126,
MySQL 8.0报错--1118-Row size too large. The maximum row size for the used table type, not counting BLOBs,is 8126,
MySQL 8.0报错--1118-Row size too large. The maximum row size for the used table type, not counting BLOBs,is 8126,
【Node】Mac多版本Node切换
【Node】Mac多版本Node切换
1188 1
|
自然语言处理 前端开发 JavaScript
ECharts实现雷达图详解
ECharts 是百度开源的一款强大的数据可视化工具,支持多种图表类型如折线图、柱状图、饼图等,并提供丰富的交互功能。其核心实现原理包括数据驱动、Canvas/SVG渲染、响应式布局、动画效果、事件监听等。本文通过具体示例介绍了如何使用 ECharts 实现交互式雷达图,包括引入库、创建图表容器、配置雷达图、添加交互功能及动态数据更新等功能。通过简单的步骤即可在网页中展示绚丽的数据大屏。
1258 4
ECharts实现雷达图详解
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
2715 1
Vue3项目使用G6可视化组件实现一个树形机构图
|
前端开发 JavaScript
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
本文介绍了在Vue3 + ElementPlus项目中使用`computed`属性实现前端静态分页的方法,并提供了详细的示例代码和运行效果。
564 1
在 Vue3 + ElementPlus 项目中使用 computed 实现前端静态分页
|
算法 5G 数据安全/隐私保护
3D-MIMO信道模型的MATLAB模拟与仿真
该研究利用MATLAB 2022a进行了3D-MIMO技术的仿真,结果显示了不同场景下的LOS概率曲线。3D-MIMO作为5G关键技术之一,通过三维天线阵列增强了系统容量和覆盖范围。其信道模型涵盖UMa、UMi、RMa等场景,并分析了LOS/NLOS传播条件下的路径损耗、多径效应及空间相关性。仿真代码展示了三种典型场景下的LOS概率分布。
437 1
在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件
本文介绍了如何在Vue3项目中使用`vue3-seamless-scroll`插件实现无缝滚动效果,并提供了详细的示例代码和运行效果。
5411 0
|
JavaScript 前端开发 数据可视化
ECharts 雷达图案例001-自定义节点动画
使用ECharts创建自定义雷达图,通过JavaScript动态更新高亮和交互反馈,增强用户体验。关键步骤包括:开启动画效果,数据更新时保持图表状态,鼠标悬浮时动态高亮指标,优化动画性能。案例展示了ECharts在数据可视化中的灵活性和表现力。[查看完整案例](https://download.csdn.net/download/No_Name_Cao_Ni_Mei/89454380)。
831 0
 ECharts 雷达图案例001-自定义节点动画

热门文章

最新文章