资讯专栏INFORMATION COLUMN

echarts4.x雷达图如何展示一维数据?

YJNldm / 837人阅读

摘要:另外,需要将雷达图的半径设置和极坐标的半径设置设为相同,以便他们有相同的放缩比例。极坐标的径向轴的分隔个数和雷达图的指示器轴的分割个数必须相同。

最近做的项目其中一个功能是画雷达图,鼠标滑过雷达图的拐点,展示该维相关数据,并且需要显示雷达图的刻度。

但是我发现单纯的雷达图似乎没办法展示一维数据。

我总结了一下,关于画雷达图,我遇到的难点有三个:

(1)如何显示刻度。

(2)如何判断滑过的是拐点。

(3)如何找出拐点对应的该维数据。

下面总结问题的解决办法:

问题(1):
echarts的版本从4.x以后不再提供雷达图的刻度标签属性了,但3.x版本是有刻度这个配置属性的,radar.axisLabel。所以要想显示雷达图的刻度,可以将echarts的版本换回3.x版本。但是对于我的项目来说,这个办法不太可行,因为我的项目中有很多的图表是基于4.x版本绘制的,如果改回3.x版本,要改动的东西就太多了,牵一发而动全身。

所以我必须想别的办法。我考虑用极坐标做雷达图的底图,将极坐标的刻度作为雷达图的刻度,关键步骤如下:

1、我的雷达图的显示数值的范围是1~10,显示的刻度间隔是2,因此我用极坐标的径向轴radiusAxis来显示刻度间隔是2的刻度。

2、另外,需要将雷达图的半径设置radar.radius和极坐标的半径设置polar.radius设为相同,以便他们有相同的放缩比例。

3、极坐标的径向轴的分隔个数radiusAxis.splitNumber和雷达图的指示器轴的分割个数radar.splitNumber必须相同。

4、极坐标的中心点polar.center和雷达图的中心点radar.center也必须相同。

var dimensionData = [
    {name: "覆盖", max: 10},
    {name: "干扰", max: 10},
    {name: "感知", max: 10},
    {name: "故障", max: 10},
    {name: "容量", max: 10}
];
data = [7.9, 3, 3, 5.11, 4.4];
var radius = "60%";
var radarOption = {
    radar:{
        center:["50%", "50%"],
        startAngle:90,
        indicator:dimensionData,
        splitNumber: 5,
        radius: radius,
        shape: "circle",
        name: {
           show:true,
           textStyle: {
             color: "#ffffff",
             fontSize: 12
            }
        },
        splitArea: {
           areaStyle: {
             color: ["rgba(0, 21, 102, 0.4)"],
           },
        },
        splitLine: {
            show:true,
            lineStyle: {
              color: ["rgba(238,238,238, 0.2)"]
            }
        },
        axisLine: {
           lineStyle: {
             color: ["rgba(238,238,238, 0.2)"]
           }
        }
    },
    //极坐标系
    polar: {
        radius: radius,
    },
    angleAxis: {
       axisLine: {
          lineStyle: {
             color: "rgba(238,238,238, 0.2)"
          }
       },
    },
    radiusAxis: {
        //用注释掉的这个用法可以动态控制刻度的个数,但有时候会出现刻度标签显示不全的现象
        // type: "value",
        // min: 0,
        // max: 10,
        // interval: 2
        type: "category",
        axisLabel:{
           show:true,
           interval: 0,
           fontSize:9,
           color:"rgba(255, 255, 255, 0.5)",
        },
        axisTick:{
           show:true,
           inside:true,
        },
        axisLine:{
           show:true,
           lineStyle:{
              color:"rgba(238,238,238, 0.2)"
           }
        },
        splitLine:{
           show:false,
           lineStyle:{
             color:"rgba(238,238,238, 0.2)"
           }
        },
        data:["2", "4", "6", "8", "10"]
    },
    tooltip: {
        show:false,
        trigger:"item"
    },
    series:[
    {
        type: "radar",
        radarIndex:0,
        data:[{
           value:data
         }],
         symbol: "circle",
         symbolSize: 6,
         itemStyle: {
            normal: {
               color: "rgba(255, 255,255, 1)",
               borderColor: "rgba(255, 179, 0, 1)",
               borderWidth: 1,
            }
         },
         areaStyle: {
            normal: {
               color: "rgba(255, 179, 0, 0.8)",
            }
         },
         lineStyle: {
            width: 2,
            color: "rgba(255, 179, 0, 1)"
         }
      }
   ]
}

问题(2):
点击雷达图的拐点,显示相关数据。我一开始想法是用tooltip来实现,但是我发现tooltip无法实现。原因有两个:一是tooltip的触发条件只能为trigger:"item",trigger:"axis"不能用。二是设置trigger:"item"之后,鼠标滑过雷达图的任何区域,tooltip都会展示所有维度的数据,没有办法实现滑过拐点,才展示数据和只展示该维数据。

所以我考虑用echarts提供API的鼠标事件来实现效果,我用的是mouseover事件和mouseout事件。我想要通过事件传递的参数来判断鼠标滑过的是不是拐点。我先去查看了echarts官方文档中提供的参数,没有什么明显的参数可以让我判断出是不是鼠标滑过的是不是拐点。


 但是我的组长坚信,鼠标滑过不同的地方,一定传的参数是有某个地方不同的。因此在坚持不懈和仔细的查看事件参数后,终于找到了。params.event.target.__dimIdx这个参数,在滑过拐点时,显示的是该拐点的维度下标,滑过其他区域时,显示的是undefied。因此可以用这个参数来判断鼠标滑过的是不是拐点。

this.radarChart.on("mouseover", function(params){
    var isSelectedDot = params.event.target.__dimIdx;
    if(isSelectedDot == undefined) return;

    //做鼠标滑过拐点的操作
});

问题(3):
拐点找到了,如何找出拐点对应的该维数据?在echarts4.x中,事件所得到的数据,是所有维度的数据,而不是多带带某个维度的数据,如下图:

但是此时我已经获取到拐点的维度下标了,因此根据下标就可以获取到该维度的数据了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/106225.html

相关文章

  • echarts4.x雷达如何展示一维数据

    摘要:另外,需要将雷达图的半径设置和极坐标的半径设置设为相同,以便他们有相同的放缩比例。极坐标的径向轴的分隔个数和雷达图的指示器轴的分割个数必须相同。 最近做的项目其中一个功能是画雷达图,鼠标滑过雷达图的拐点,展示该维相关数据,并且需要显示雷达图的刻度。 但是我发现单纯的雷达图似乎没办法展示一维数据。 我总结了一下,关于画雷达图,我遇到的难点有三个: (1)如何显示刻度。 (2)如何判断滑过...

    jay_tian 评论0 收藏0
  • echarts4.x雷达如何展示一维数据

    摘要:另外,需要将雷达图的半径设置和极坐标的半径设置设为相同,以便他们有相同的放缩比例。极坐标的径向轴的分隔个数和雷达图的指示器轴的分割个数必须相同。 最近做的项目其中一个功能是画雷达图,鼠标滑过雷达图的拐点,展示该维相关数据,并且需要显示雷达图的刻度。 但是我发现单纯的雷达图似乎没办法展示一维数据。 我总结了一下,关于画雷达图,我遇到的难点有三个: (1)如何显示刻度。 (2)如何判断滑过...

    godruoyi 评论0 收藏0
  • 如何在新工程中添加两个不同版本的的echarts库

    摘要:标题我就觉得起的很变态。闲话不多说,先说出现的背景吧。然后这个机子传过来的数据就可能来条。如果用最新的来做,但是数据太小不足以画出图来,但是如果数据太大传输也是一个问题。  emmmmm.....标题我就觉得起的很变态。闲话不多说,先说出现的背景吧~~。   因为业务上的需求,跟一个硬件对接,要做大屏展示大厅客流热力图分布(背景图是客户那边给的)。然后这个机子传过来的数据就可能20来条。如果...

    番茄西红柿 评论0 收藏0
  • 【IoT】创业:产品雷达 - 如何明智地权衡产品?

    摘要:该工具解决了哪些业务问题产品雷达图可以直观地表示产品组合和产品决策制定的众多属性。因此,快速浏览雷达图将显示每个产品的潜在关注领域。下图的雷达图显示,产品在客户价值和创新的理想特征方面优于产品和。 在文章《如何细分市场?这篇文章就够了》中用到了雷达图,本篇内容就来讲讲什么是产品雷达图,以...

    MangoGoing 评论0 收藏0
  • Python pyecharts如何绘制雷达

      小编写这篇文章的主要方法,就是介绍关于Python pyecharts的一些相关技巧,包括教给大家怎么去使用Python pyecharts绘制雷达图。其实,说起来还是挺麻烦的,那么,我们要怎么去绘制雷达图呢?有没有什么比较好用的方法呢?下面给大家详细解答下。  雷达图  雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法。轴的相对位置和角度通常是无...

    89542767 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<