Echarts-雷达图
// 显示能力雷达图 $(".company .grade").hover(function () { $(".powerChart").show(); var id = $(this).attr("data-id"); var positionX = $(this).offset().left; var positionY = $(this).offset().top; $.ajax({ type: "POST", cache: false, url: "/Question/GetShopRadarMap", data: { shopId: id }, contentType: "application/x-www-form-urlencoded", dataType: "json", async: false, success: function (result) { var myChart; var domMain = document.getElementById('powerChart'); var option = { tooltip: { trigger: 'axis' }, radar: { name: { textStyle: { color: '#000' } }, indicator: [],//雷达图数据 nameGap:5,//文字距离图形的距离 radius: 52//设置雷达图大小 }, series: [] }; var category = result.resultList; var num = []; for (var i = 0; i < category.length; i++) { option.radar.indicator.push({ name: category[i].CategoryName}); num.push(category[i].AnswerNum); } option.series.push({ type: 'radar', data: [{ value: num }] }); myChart = echarts.init(domMain); myChart.setOption(option, true); } }); $(".powerChart").css({ "left": positionX-100, "top": positionY+30 });// 定位雷达图显示的位置 },function() { $(".powerChart").hide(); });
html:<div id="powerChart"></div> css:#powerChart{width: 220px;height:180px;margin: 0 15px;}