echarts雷达图自定义射线颜色、边框效果和背景样式

目录

1、在官网找样例

2、初步改造示例，有个雏形

3、细节改造和优化

4、全部代码

5、原始效果和完成效果对比

---

 

1、在官网找样例

样例地址：Examples - Apache ECharts

 

2、初步改造示例，有个雏形

对应的代码（为了说明问题，这里只简单列了option的相关代码）：

let demoOption = {
                radar: {
                    center: ["50%", "56%"],
                    indicator: [
                        { text: "语文", max: 150 },
                        { text: "数学", max: 150 },
                        { text: "英语", max: 150 },
                        { text: "物理", max: 120 },
                        { text: "化学", max: 108 },
                    ],
                },
                series: [
                    {
                        name: "成绩单",
                        type: "radar",
                        data: [
                            {
                                value: [100, 93, 123, 90, 70],
                                label: {
                                    show: true,
                                    formatter: function (params) {
                                        return params.value;
                                    },
                                },
                                areaStyle: {
                                    color: new echarts.graphic.RadialGradient(
                                        0.1,
                                        0.6,
                                        1,
                                        [
                                            {
                                                color: "rgba(255, 145, 124, 0.1)",
                                                offset: 0,
                                            },
                                            {
                                                color: "rgba(255, 145, 124, 0.9)",
                                                offset: 1,
                                            },
                                        ]
                                    ),
                                },
                            },
                        ],
                    },
                ],
            };

得到的效果如下图：

3、细节改造和优化

通过对比效果图和初步示例，我们发现需要改造的点：

• 数据替换成展示数据
• 雷达图圈层减少为3层
• 射线颜色
• 雷达图区域背景颜色
• 雷达图边框颜色

根据这个思路我们就可以一点一点改造数据向着效果图靠拢，这里我就不一一去做代码对比了，很多要点我已经在代码中注释了。

4、全部代码

5、原始效果和完成效果对比

 各种效果变化，你可以在实操中，慢慢体会。