echarts雷达图怎么给每个拐点设置不同的颜色

最新推荐文章于 2024-06-19 11:31:41 发布
最新推荐文章于 2024-06-19 11:31:41 发布
阅读量9.3k 收藏 22
点赞数 11
分类专栏： Echarts 文章标签： echarts 雷达图 radar 拐点颜色
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MissRen920/article/details/101031258
版权

前言

最近有这样的需求需要用到echarts的 雷达图 然后这不是主要的，因为基本的配置官网上都是有的，但是需求要求雷达图的每个拐点要有不同的颜色，这样比较有特色，我。。。最后在官网找了半天发现还是只能设置一个颜色，但是需求又要有不同的颜色，怎么办了？投机取巧吧
话不多说，主要的思路是通过绘制多个图形，每个图形设置自己的颜色，然后叠加在一起，产生视觉上的在一张图就可以了，直接上代码吧，不懂的可以去官网看看。


var itemArr = [90, 80, 70, 60, 50, 40];   //数据数组

var n1 = [90, '', '', '', '', '']
var n2 = ['', 80, '', '', '', '']
var n3 = ['', '', 70, '', '', '']
var n4 = ['', '', '', 60, '', '']
var n5 = ['', '', '', '', 50, '']
var n6 = ['', '', '', '', '', 40]
var n7 = ['', '', '', '', '', '']
var labelArr = ['外观', '拍照', '系统', '性能', '屏幕', '价格'] //显示图例用
option = {
        legend: {
            orient: 'vertical',
            left: '400px',
            bottom: '450',
            icon: 'circle',
            data: labelArr,
            textStyle: {
              color: '#000000'
            }
          },
    radar: [
        {
            splitLine: {
                lineStyle: {
                    color: '#000'
                }
            }
        },
        {
            indicator: [  //绘制总的图形
                {text: '外观', max: 100},
                {text: '拍照', max: 100},
                {text: '系统', max: 100},
                {text: '性能', max: 100},
                {text: '屏幕', max: 100},
                 {text: '价格', max: 100},
            ],
            nameGap: 6,
            center: ['50%', '50%'],
            radius: 105,
            name: {
                textStyle: {
                    color: '#000',
                    fontSize: 14,
                    fontWeight: 400,
                }
            },
            splitArea: {
                areaStyle: {
                    color: ['none',
                        'none', 'none',
                        'none', 'none'],
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#cde6f5'
                },
            },
            splitLine: {
                lineStyle: {
                    color: '#cde6f5' //网格的颜色
                },
            }
        }
    ],
    series: [
        {
            type: 'radar', //绘制总的图形不设置拐点
            radarIndex: 1,
            data: [
                {
                    value: itemArr ,
                    symbolSize: 7,
                    lineStyle: {
                        width: 2,
                        color: '#29B8FF'
                    },
                    areaStyle: {
                        normal: {
                            opacity: 0.75,
                            color: '#f8f7f7'
                        }
                    }
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 0,
                    color: '#000',
                    // show:false
                }
            },
            silent: true,
            z: 1 //图层是一层一层叠加，所以这个也是一级一级递增
        },
        {
            type: 'radar', //绘制第一个点
            radarIndex: 1,
            name: labelArr[0],
            silent: true,
            z: 2, //图层是一层一层叠加，所以这个也是一级一级递增
            data: [
                {
                    value: n1,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#A66CFE'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            }
        },
        {
            type: 'radar',
            radarIndex: 1, //绘制第二个点
            name: labelArr[1],
            silent: true,
            z: 3, //图层是一层一层叠加，所以这个也是一级一级递增
            data: [
                {
                    value: n2,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#FFA662'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            
        },
              {
            type: 'radar', //绘制第三个点
            radarIndex: 1,
            name: labelArr[2],
            silent: true,
            z: 4, //图层是一层一层叠加，所以这个也是一级一级递增
            data: [
                {
                    value: n3,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#5AA4FB'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            
        },
               {
            type: 'radar', //绘制第四个点
            radarIndex: 1,
            name: labelArr[3],
            silent: true,
            z: 5, //图层是一层一层叠加，所以这个也是一级一级递增
            data: [
                {
                    value: n4,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#FF858B'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            
        },
         {
            type: 'radar', //绘制第五个点
            radarIndex: 1,
            name: labelArr[4],
            silent: true,
            z: 6, //图层是一层一层叠加，所以这个也是一级一级递增
            data: [
                {
                    value: n5,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#7AF16F'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            
        },
         {
            type: 'radar', //绘制第六个点
            radarIndex: 1,
            name: labelArr[5],
            silent: true,
            z: 7, //图层是一层一层叠加，所以这个也是一级一级递增
            data: [
                {
                    value: n6,
                    symbolSize:7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#33A7BF'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            
        },
        {
            type: 'radar', //这个图层是为了盖住圆心，如果去掉，圆心的颜色为最后一个图层的颜色（不信就自己试试）
            radarIndex: 1,
            name: '',
            silent: true,
            z: 8, //图层是一层一层叠加，所以这个也是一级一级递增
            data: [
                {
                    value: n7,
                    symbolSize: 7,
                }
            ],
            itemStyle: {
                normal: {
                    borderWidth: 2,
                    color: '#f8f7f7'
                }
            },
            lineStyle: {
                width: 0,
                labelLine: {
                    show: false   //隐藏标示线
                }
            },
            
        },
    ]
}

上一张图片吧
在这里插入图片描述
为了让大家看的清楚，所以没有进行数据和方法的处理，大家自己进行优化吧 。
代码注释已经写得很详细了，加班太累，先溜了~

转载需标注！
还请多多指教！

不爱码代码的程序猪
关注
  • 11
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
echarts 雷达图 点的颜色自定义 名字颜色自定义 vue实现
qq_38946996的博客
05-17 1646
根据不同的等级 节点显示不同的颜色 DOM层 <div class="main-left"> <div id="radar_echarts" style="width: 100%;height: 100%;"></div> <div class="main-left-top-right"> <div class="item gf"> <span class="block"></spa.
多种颜色搭配的PPT雷达图
07-16
雷达图，也称为蜘蛛图或星形图，主要用于比较多个相关变量在不同维度上的表现。例如，它可以用于产品特性对比、个人能力评估、财务比率分析等场景。在每个轴上，数据点代表一个特定的变量，通过连接所有点形成一个...
雷达图相关配置
xumengxia的博客
09-16 450
123 (function() { // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".radar")); // 2.指定配置 var option = { tooltip: { show: true, // 控制提示框组件的显示位置 position: ["60%", "10%"] }, radar: { indicator: [ .
ECharts 雷达图案例001-自定义节点动画
最新发布
No_Name_Cao_Ni_Mei的博客
06-19 516
我们为雷达图的每个指标定制了独特的显示样式，包括颜色、字体和对齐方式。使用了富文本格式（rich text format）来增强可读性和视觉效果。本案例展示了 ECharts 在雷达图定制化设计方面的强大能力，无论是在数据分析还是创意表达上，都能提供出色的支持。
vue中使用echarts实现不同颜色拐点雷达图
qq_38637619的博客
06-07 2303
vue中使用echarts实现不同颜色拐点雷达图 利用雷达图图层叠加，一个个点画，根据不同数组值画出不同颜色值的拐点。 例如：[1,2，‘ ’，2，‘ ’，3] （少于5的值，红色） [‘ ’,‘ ’，6，‘ ’，‘ ’，‘ ’] （大于5少于8的值，绿色）等等。。。 Echarts官网： https://echarts.apache.org/examples/zh/editor.html?c=radar 安装依赖： npm install echarts -S 按需加载：（官网提供全部引入，按需引入，
Echarts雷达图单独设置拐点颜色
抱着肩膀笑看看
06-18 4513
option: { title: { text: '基础雷达图', }, legend: { data: ['预算分配（Allocated Budget）'], }, radar: { // shape: 'circle', center: ['50%', '50%'], // 设置段数 splitNum...
vue+echarts 绘制一个雷达图组件，每个点的颜色不同，按照顶点的数据所在显示图例
qq_44035882的博客
02-28 1272
【代码】vue+echarts 绘制一个雷达图组件，每个点的颜色不同，按照顶点的数据所在显示图例。
雷达图自定义各点颜色
weixin_59017683的博客
01-06 1276
雷达图自定义各点颜色，点击legend数据实时响应
记录一下自己封装的echart雷达图（可以根据表格进行点击切换联动，传递color改变雷达图颜色），方便以后用到参考
前端小攻城狮的博客
11-17 1198
<template> <div> <div :id="radarChart" style="width:350px;height:280px"></div> </div> </template> <script> import * as echarts from 'echarts' const idGen = () => { return new Date().getTime().
ECharts雷达图案例002-诈骗性质分析.rar
06-19
预览地址：https://blog.csdn.net/No_Name_Cao_Ni_Mei/article/details/139797312 预览地址：https://blog.csdn.net/No_Name_Cao_Ni_Mei/article/details/139797312 预览地址：... ... ...
ECharts雷达图案例001-自定义节点样式.rar
06-19
预览地址：https://blog.csdn.net/No_Name_Cao_Ni_Mei/article/details/139798012 预览地址：https://blog.csdn.net/No_Name_Cao_Ni_Mei/article/details/139798012 预览地址：... ... ...
Unity雷达图插件，游戏属性设置
06-14
4. **自定义外观**：为了适应不同的游戏风格和视觉需求，该插件可能提供了自定义雷达图颜色、线条样式、轴标签等功能，让开发者可以根据项目的艺术风格定制雷达图的外观。 5. **多对象比较**：除了展示单个游戏对象...
AngularJS 自定义指令 - ECharts 2 雷达图
09-24
ECharts 2是ECharts的一个版本，提供了一套完整的图表类型，如折线图、柱状图、饼图和雷达图等。雷达图是一种多维数据可视化的图表，常用于展示多个变量相对于某个中心点的表现。 3. **封装ECharts雷达图**： 要...
python线条颜色不同_关于python：为什么我的颜色栏上有线条？
weixin_39693437的博客
11-23 354
编辑：由于这似乎是一个受欢迎的帖子，因此以下解决方案对我来说似乎很好。 谢谢@gazzar和@mfra。12cbar.solids.set_rasterized(True)cbar.solids.set_edgecolor("face")有谁知道为什么我的颜色条中似乎有线条？ 还是为什么颜色过渡不平滑？ 显然，我在使用底图，但这没关系，因为所有这些都是在AFAICT之下进行的matplotlib调...
使用echarts雷达图 增加legend并使图例颜色和serise中的线条颜色相对应
zqzmt的博客
08-10 2736
增加legend图例 var name = ['声压比', '谐波比', '高频比', '复杂度', '异常抗性', '健康分']; legend: { left:'right', top:'top', orient:'vertical', textStyle:{
echarts_雷达图
qq_43260366的博客
07-17 2047
由于在radar配置项中的formatter只能获取到配置项的name值，获取不带其他值，因此我将占据百分比设置成一个数组。修改文本颜色：若是仅仅修改配置项文本颜色，可以通过indicator数组元素的color属性去修改。如上图，此处的formatter不能识别html标签，会将html标签识别为普通字符串。直角系坐标都是使用xAxis/yAxis配置项，但是雷达图使用的是。配置项的默认颜色和坐标轴颜色相同。如上图，先复制一个最简单的雷达图。如上图，可以设置三种不同的样式。如上图配置项，配置项默认值为。
echarts之 雷达图的使用 1
笑望灬星辰
07-15 2478
echarts之 雷达图的使用 1 项目结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 导入echarts --> <script src="../js/echarts.min.js"&
关于echarts的雷达图详细的参数说明
小白的博客
05-19 5315
要实现的效果图如下： 接下来主要关于下面的几个参数进行设置 雷达图的圈数 雷达图每圈上面的数字 雷达图区域拐点的数值 雷达图拐点的样式 雷达图每个区域的颜色设置 雷达图tooltip限制在图表区域内 鼠标可以移动到tooltip里，一般需要在tooltip中加入可操作元素时有用 雷达图背景颜色透明 export const industryFactorOption = { title: { text: '雷达图', textStyle: {
echarts关系图改造+color自定义
qq_40934617的博客
11-11 2072
echats节点设置不同颜色 this.$nextTick(()=>{ var chartDom = document.getElementById('echartshow'); var myChart = echarts.init(chartDom); var option; option = { tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdate: 'quinticInOut',
如何给echarts的radar每个拐点设置不同的颜色
06-10
给 Echarts 的 radar（雷达图）每个拐点设置不同的颜色，可以使用 `itemStyle.normal.color` 属性来实现。具体方法如下： 1. 在 `series` 中，找到 `radar` 类型的数据项，并设置 `itemStyle` 属性。 2. 在 `itemStyle` 属性中，设置 `normal` 属性，并在其中设置 `color` 属性。`color` 属性可以是单个颜色值，也可以是一个数组，包含多个颜色值。 3. `color` 数组中的颜色值个数应该与数据项中的数据个数相同，这样每个拐点才能对应一个颜色值。 下面是一个示例代码： ```javascript option = { // ... series: [{ type: 'radar', data: [{ value: [60, 73, 85, 40, 90, 70], name: '某物品', itemStyle: { normal: { color: ['#FF3333', '#FFFF00', '#33FF33', '#3333FF', '#FF00FF', '#00FFFF'] } } }] }] }; ``` 在上面的代码中，`itemStyle` 中的 `color` 属性是一个包含 6 个颜色值的数组，分别对应雷达图中的 6 个拐点。这样，每个拐点就会显示对应的颜色。 如果你要设置每个拐点的颜色不同，可以将 `color` 属性设置为一个函数，函数的返回值是每个拐点对应的颜色值。下面是一个示例代码： ```javascript option = { // ... series: [{ type: 'radar', data: [{ value: [60, 73, 85, 40, 90, 70], name: '某物品', itemStyle: { normal: { color: function(params) { var colorList = ['#FF3333', '#FFFF00', '#33FF33', '#3333FF', '#FF00FF', '#00FFFF']; return colorList[params.dataIndex]; } } } }] }] }; ``` 在上面的代码中，`color` 属性被设置为一个函数，函数的参数 `params` 包含了当前拐点的信息，例如 `params.dataIndex` 表示当前拐点在数据项中的索引。通过 `params.dataIndex`，就可以根据需要返回对应的颜色值。 通过上述设置，就可以给 Echarts 的 radar 每个拐点设置不同的颜色了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值