// 显示能力雷达图
$(".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:,//文字距离图形的距离
radius: //设置雷达图大小 },
series: []
}; var category = result.resultList;
var num = [];
for (var i = ; 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-, "top": positionY+ });// 定位雷达图显示的位置 },function() {
$(".powerChart").hide();
});
html:<div id="powerChart"></div>

css:#powerChart{width: 220px;height:180px;margin:  15px;}

Echarts-雷达图的更多相关文章

  1. echarts雷达图

    用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  2. echarts 雷达图的个性化设置

    echarts 雷达图的个性化设置 function test() { let myChart = echarts.init(document.getElementById('levelImage') ...

  3. echarts雷达图点击事件

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...

  4. echarts雷达图点击事件 包含(2.x,3.85,4.02)测试

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...

  5. ECharts 雷达图怎么在类目值下面显示数值

    需要实现的效果: 官网里面的demo显示数值,都是在拐点处: [解决] 1.只显示类目 <div id="mychart" style="width:300px;h ...

  6. ECharts雷达图详细配置说明

    雷达图表配置说明: // 指定图表的配置项和数据 var option = { backgroundColor: 'rgba(204,204,204,0.7 )', // 背景色,默认无背景 rgba ...

  7. Echarts数据可视化series-radar雷达图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  8. echarts细节的修改(2):矩形数图,柱状图,折线图,雷达图等

    1.矩形数图的配置,是直接拿饼图的配置 然后将type换成treemap. 修改类型 option.series.type = 'treemap'; 关闭面包屑导航 option.series.bre ...

  9. 关于echarts生成雷达图的一些参数介绍

    export const industryFactorOption = { title: { text: '雷达图', textStyle: { color: 'rgba(221,221,221,1) ...

  10. 【带着canvas去流浪(6)】绘制雷达图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...

随机推荐

  1. java 学习帮助

    java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的,能不能给点建议?今 天我是打算来点干货,因此咱们就不说一些学习方法和技巧了,直接来 ...

  2. 远程调用——hessian使用入门

    Hessian是一个轻量级的remoting onhttp工具,使用简单的方法提供了RMI的功能. 相比WebService,Hessian更简单.快捷.采用的是二进制RPC协议,因为采用的是二进制协 ...

  3. python 排序函数

    1.sorted()函数:内建函数,适用于所有类型,返回排序后的对象,原对象不改变,sorted(a,key=,reversed=True) >>> sorted((3,1,4,2) ...

  4. centos7安装thrift

    1. 升级所有软件包 yum -y update 2.安装开发工具 yum -y groupinstall "Development Tools" 3.安装wget yum -y ...

  5. vue 记一次编译没反应、无进度、没有任何报错的提示,但后台却TM一直消耗内存的BUG:

    控制台一直提示“building for production...”,而且spinner停止了动画! 由于没有任何的提示.况且项目的代码.结构.设计完全未知模糊的情况下,我只能按照unix的理念“使 ...

  6. C#实现插件的“动态替换”

    如果某个"功能"需要动态更新?这种动态更新,可能是需求驱动的,也可能是为了修改 BUG,面对这种场景,如何实现“热插拔”呢?先解释一下“热插拔”:在系统运行过程动态替换某些功能,不 ...

  7. error: unkown OS type hvm 解决方法 kvm libvirtd 重新加载已有虚拟机信息

    想验证下最新版本的qemu的一些功能,于是将其从qemu-0.12升级到了qemu-1.4,编译安装一切都很顺利,但是当创建virtual machine时,报错如下: [root@compute-- ...

  8. tcp3握手,作用,syn攻击

    tcp建立链接3次握手: 1.客户端→服务端,发送seq=x,syn=1 2.服务端→客户端,发送seq=y,syn=1,ack=x+1 3.客户端→服务端,发送seq=z,ack=y+1 三次握手作 ...

  9. log4j日志写入数据库

    # log4j写入数据库 ### 前言-----------------------------log4j是写入日志到控制台和文件很常见,但是写入到数据库不多见.做性能测试写入到数据库,统计方便些. ...

  10. UI-7-UIScrollView

    #import "ViewController.h" @interface ViewController ()<UIScrollViewDelegate> { UIIm ...