動態建立echarts雷達圖
.radar {
width: 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> 資料 </a> <a class="btn btn-white btn-sm" onclick="GetProcessRadarData(8)" id="hotBtn"> <i class="fa fa-ship"></i> 熱點工程</a> <a class="btn btn-white btn-sm" onclick="GetProcessRadarData()" id="bothBtn"> <i class="fa fa-ship"></i> 全部工程 </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> 返回 </a> <a class="btn btn-white btn-sm" id="processExcelBtn"> <i class="fa fa-file-excel-o"></i> 匯出 </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)', width: 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: { width: 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]}]}
熱點工程:
全部工程:
資料表: