美文网首页
Echarts 雷达图 radar 样式美化

Echarts 雷达图 radar 样式美化

作者: 喵喵同学嘛 | 来源:发表于2019-04-16 11:20 被阅读0次

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

    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 样式美化

          本文链接:https://www.haomeiwen.com/subject/xfgvwqtx.html