动态创建echarts雷达图

.radar {
　　 33%;
　　height: 300px;
　　float: left;
　　margin: 10px 0;
}

<div style="line-height: 30px;background-color: white;overflow: hidden;margin: 0 20px 15px 20px;">
                    <div class="styleDiv2">
                        <div id="toolsDiv">
                            <div class="title"><i class="fa fa-bars"></i><strong>先行号船绩效评价</strong></div>
                            <div>
                                <a class="btn btn-white btn-sm" onclick="toggle2()">
                                    <i class="fa fa-file-text-o"></i>&nbsp;数据
                                </a>
                                <a class="btn btn-white btn-sm" onclick="GetProcessRadarData(8)" id="hotBtn">
                                    <i class="fa fa-ship"></i>&nbsp;热点工程
                                </a>
                                <a class="btn btn-white btn-sm" onclick="GetProcessRadarData()" id="bothBtn">
                                    <i class="fa fa-ship"></i>&nbsp;全部工程
                                </a>
                            </div>
                        </div>
                        <div class="row" style="margin-top:0px">
                            <div style="overflow: hidden;padding: 0 15px" id="radarBox">

                            </div>
                        </div>
                    </div>

                    <div class="styleDiv2" style="display:none;">
                        <div id="toolsDiv">
                            <div class="title"><i class="fa fa-bars"></i><strong>先行号船绩效评价</strong></div>
                            <div>
                                <a class="btn btn-white btn-sm" onclick="toggle2()">
                                    <i class="fa fa-chevron-circle-left"></i>&nbsp;返回
                                </a>
                                <a class="btn btn-white btn-sm" id="processExcelBtn">
                                    <i class="fa fa-file-excel-o"></i>&nbsp;导出
                                </a>
                            </div>
                        </div>
                        <div class="table-responsive" style="margin: 0px 20px;">
                            <table class="table table-condensed table-bordered table-striped " id="processTable">
                                <thead style="background:#5EBECA">
                                    <tr>
                                        <th rowspan="2" style="color:#fff;text-align: center;vertical-align:middle;">工程号</th>
                                        <th rowspan="2" style="color:#fff;text-align: center;vertical-align:middle;">分段数(只)</th>
                                        <th rowspan="2" style="color:#fff;text-align: center;vertical-align:middle;">结构图纸数(份)</th>
                                        <th colspan="2" style="color:#fff;text-align: center;vertical-align:middle;">结构图纸(份)</th>
                                        <th colspan="2" style="color:#fff;text-align: center;vertical-align:middle;">预处理(只)</th>
                                        <th colspan="2" style="color:#fff;text-align: center;vertical-align:middle;">下料(只)</th>
                                        <th colspan="2" style="color:#fff;text-align: center;vertical-align:middle;">组立配套(只)</th>
                                        <th colspan="2" style="color:#fff;text-align: center;vertical-align:middle;">上胎(只)</th>
                                        <th colspan="2" style="color:#fff;text-align: center;vertical-align:middle;">下胎(只)</th>
                                        <th colspan="2" style="color:#fff;text-align: center;vertical-align:middle;">交涂(只)</th>
                                        <th colspan="2" style="color:#fff;text-align: center;vertical-align:middle;">冲砂(只)</th>
                                        <th colspan="2" style="color:#fff;text-align: center;vertical-align:middle;">涂装(只)</th>
                                    </tr>
                                    <tr>

                                        <th style="color:#fff;text-align: center;vertical-align:middle;">完成</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">剩余</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">完成</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">剩余</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">完成</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">剩余</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">完成</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">剩余</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">完成</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">剩余</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">完成</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">剩余</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">完成</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">剩余</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">完成</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">剩余</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">完成</th>
                                        <th style="color:#fff;text-align: center;vertical-align:middle;">剩余</th>
                                    </tr>
                                </thead>
                                <tbody id="processTableBody" style="cursor: pointer;text-align: center;color: #686767;"></tbody>
                            </table>
                        </div>
                    </div>
                </div>

function GetProcessRadarData(hot_info) {
        ChangeStyle2(hot_info);//按钮切换选中效果
        $.ajax({
            url: "DashBoard.csx",
            data: {
                tag: "GetRadarData",
                hot_info: hot_info //热点工程
            },
            type: 'POST',
            dataType: 'JSON',
            success: function (objData) {
                var colorArr = ['#91cc75', '#fac858', '#73c0de'];//雷达图颜色数组
                CreateRadar(objData, colorArr);
            },
            error: function () { }
        });
    }
    
    
     function ChangeStyle2(hot_info) {
        if (hot_info == 8) {
            $("#hotBtn").addClass("chooseStyle");
            $("#bothBtn").removeClass("chooseStyle");
        } else {
            $("#hotBtn").removeClass("chooseStyle");
            $("#bothBtn").addClass("chooseStyle");
        }
    }
    
    
    function CreateRadar(objData, colorArr) {
        var color, obj, n = 0;
        $("#radarBox").empty();
        for (var i = 0; i < objData.RadarData.length; i++) {
            $("#radarBox").append("<div class=\"radar\" id=\"radar" + i + "\"></div>"); 
            obj = objData.RadarData[i];
            //反转循环颜色数组
            if (n > colorArr.length - 1) {
                n = 0;
                colorArr.reverse();
            }
            color = colorArr[n];
            n++;
            option = {
                color: [color],
                title: {
                    text: obj.Proj_Id,
                    x: 'center',
                    y: 'bottom',
                    textStyle: {
                        fontSize: 16,
                        color: 'rgba(248, 248, 248, 1)',
                         200
                    },
                    backgroundColor: color, //标题背景色
                    padding: [10, 100, 8, 100], //标题内边距
                    borderRadius: [10, 10, 10, 10] //标题圆角
                },
                legend: {
                    left: 'left',
                    data: ['完成率(%)'],
                    textStyle: {
                        color: color
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                radar: {
                    indicator: [
                        { name: '结构图纸', max: 100 },
                        { name: '涂装', max: 100 },
                        { name: '冲砂', max: 100 },
                        { name: '交涂', max: 100 },
                        { name: '下胎', max: 100 },
                        { name: '上胎', max: 100 },
                        { name: '组立配套', max: 100 },
                        { name: '下料', max: 100 },
                        { name: '预处理', max: 100 }
                    ],
                    //shape: 'circle', //圆形
                    radius: 95,
                    nameGap: 20,
                    center: ["50%", "48%"],
                    //splitArea: {
                    //    areaStyle: {
                    //        color: ['#FFFFFF']
                    //    }
                    //},
                    axisLine: {
                        lineStyle: {
                            color: '#b9b9b9'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#b9b9b9'
                        }
                    },
                    axisName: {
                        color: color,
                        fontWeight: 'bold',
                        fontSize: 13
                    }
                },
                series: [
                    {
                        type: 'radar',
                        areaStyle: { opacity: 0.2 },
                        emphasis: {
                            lineStyle: {
                                 4
                            }
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        data: [
                            {
                                value: obj.Rate,
                                name: '完成率(%)',
                                label: {
                                    show: true,
                                    formatter: function (params) {
                                        return params.value + "%";
                                    }
                                }
                            }
                        ]
                    }
                ]
            };
            echarts.init(document.getElementById('radar' + i)).setOption(option);
        }
    }
    
    function toggle2() {
        $(".styleDiv2").toggle();
    }

后台返回json数据格式： {"RadarData":[{"Proj_Id":"58004","Rate":[0,0,1.72,5.17,41.38,77.59,96.55,96.55,96.55]},{"Proj_Id":"8001","Rate":[99.78,83.33,87.18,92.31,92.31,96.15,96.15,98.72,98.72]},{"Proj_Id":"21501","Rate":[16.87,0,0,0,0,0,0,15.82,19.21]},{"Proj_Id":"70003","Rate":[100,85.54,85.54,85.54,100,100,100,100,100]},{"Proj_Id":"58003","Rate":[100,15.52,25.86,29.31,82.76,100,100,100,100]},{"Proj_Id":"6603","Rate":[100,51.47,60.29,85.29,95.59,100,100,100,100]},{"Proj_Id":"58002","Rate":[99.25,82.76,96.55,98.28,100,100,100,100,100]},{"Proj_Id":"8011","Rate":[100,15.79,31.58,42.11,57.89,94.74,100,100,100]},{"Proj_Id":"6604","Rate":[85.71,2.94,2.94,13.24,42.65,88.24,100,100,100]},{"Proj_Id":"5001","Rate":[0,0,0,0,0,0,0,0,0]},{"Proj_Id":"3901","Rate":[0,0,0,0,0,0,0,0,0]}]}

 热点工程：

 全部工程：

 数据表：