echarts 雷达图

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>雷达图例子</title>
        <script src="js/echarts-all.js"></script>
    </head>
    <style>
        #lei {
            width: 500px;
            height: 500px;
            
        }
    </style>

    <body>
        <div id="lei"></div>
        <script>
            var option = {
                color: ["#379EFC", "#3ECDC3"],
                title: {
                    text: '雷达图例子',
                    subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter:function(parms){//改变悬浮框内容
                    console.log(parms)
                    
                        var str="";
                        str+="<div style='text-align: center;'>"+parms[0].indicator+"</div>"
                        for(var i=0;i<parms.length;i++){
                            str+="<div>"+parms[i].name+"/"+parms[i].value+"</div>"
                        }
                            return str;
                    }
                },
                legend: {//图例
                    orient: 'vertical',
                    x: 'right',
                    y: 'bottom',
                    data: ['预算分配', '实际开销']
                },
                polar: [{    //雷达指标列表
                    indicator: [{
                            text: '销售',
                            max: 6000
                        },
                        {
                            text: '管理',
                            max: 16000
                        },
                        {
                            text: '信息技术',
                            max: 30000
                        },
                        {
                            text: '客服',
                            max: 38000
                        },
                        {
                            text: '研发',
                            max: 52000
                        },
                        {
                            text: '市场',
                            max: 25000
                        }
                    ]
                }],
                calculable: false,//是否启用拖拽重计算特性
                series: [{            //雷达图里面的数据
                    name: '例子',
                    type: 'radar',
                    data: [{
                            value: [4300, 10000, 28000, 35000, 50000, 19000],
                            name: '预算分配'
                        },
                        {
                            value: [5000, 14000, 28000, 31000, 42000, 21000],
                            name: '实际开销'
                        }
                    ]
                }]
            };
            var myEcharts=echarts.init(document.getElementById("lei"))
            myEcharts.setOption(option)
        </script>
    </body>

</html>

echarts 雷达图