echart 修改雷达图radar的代码，解决分割颜色比例splitNumber只能平均分配的问题

最新推荐文章于 2023-11-14 14:22:32 发布

只会切图的前端

最新推荐文章于 2023-11-14 14:22:32 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/qq_41786458/article/details/107024190

web移动端同时被 3 个专栏收录

8 篇文章

订阅专栏

web前端

6 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

本文介绍如何在雷达图中自定义颜色比例，通过修改源代码实现特定的颜色分布，而非依赖于平均分配。具体操作涉及定位到radarView.js文件中的特定代码段，并调整ticksCoords属性，以达到精确控制每个区域颜色的效果。

雷达图的分割颜色只能平均分配，修改代码，使其按自己定义的比例
如下图：
在这里插入图片描述

源码修改位置:
/lib/component/radar/radarView.js
搜索代码：var ticksCoords = indicatorAxis.getTicksCoords()

在后面新增代码，修改ticksCoords的值即可

if(ticksCoords.length>0){//测试删除
      var firstV=ticksCoords[0].coord
      var lenN=ticksCoords[ticksCoords.length-1].coord-firstV;
      ticksCoords.forEach(function(item,index){
         if(index==1){
          item.tickValue=1.5;
          item.coord=firstV+0.125*lenN;
         }else if(index==2){
          item.coord=firstV+0.4*lenN;
          item.tickValue=2.6;
         }else if(index==3){
          item.coord=firstV+0.675*lenN;
          item.tickValue=3.7;
         }else if(index==4){
          item.coord=firstV+0.875*lenN;
          item.tickValue=4.5;
         }
      })
}