Echarts 雷达图 radar 样式美化

修改雷达图的样式,让其变得美美哒,配置如下

image.png
    var option = {
            radar: {
                // shape: 'circle',
                name: {
                    textStyle: {
                        color: '#333',
                        // backgroundColor: '#999',
                        borderRadius: 3,
                        padding: [3, 5]
                    }
                },
                center: ['45%', '50%'],
                radius: "65%",
                startAngle: 90,
                splitNumber: 4,
                shape: "cirle",
                indicator: [
                    { name: 'java', max: 100 },
                    { name: 'javascript', max: 100 },
                    { name: 'python', max: 100 },
                    { name: 'C++', max: 100 },
                    { name: 'C#', max: 100 },
                ],
                splitArea: {
                    areaStyle: {
                        color: "#fff"
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(78,163,253,0.5)"
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(78,163,253,0.5)"
                    }
                },
            },

            series: [{
                name: '个人画像',
                symbol: "none",
                type: 'radar',
                // areaStyle: {normal: {}},
                data: [
                    {
                        value: [90, 50, 60, 85, 100],
                        name: '技能',
                        lineStyle: {
                            width: 0
                        },
                        areaStyle: {
                            normal: {
                                opacity: 0.75,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        color: "#27D9c8",
                                        offset: 0
                                    },
                                    {
                                        color: "#428BFA",
                                        offset: 0
                                    }
                                ]),
                                shadowColor: "#428BFA",
                                shadowBlur: 15
                            }
                        }
                    },

                ]
            }]
        };

基于官网的基础,修改其配置,美化样式

你可能感兴趣的:(Echarts 雷达图 radar 样式美化)