function createRadarChart(indicatorData, personData) {
var myChart = echarts.init(document.getElementById('fl2Grid')); var option = {
legend: {//图例设置
data: [{ name: personData[0].name, icon: 'rect' }, { name: personData[1].name, icon: 'rect' }],//名字和图形
left: 0,
itemGap: 30,
itemWidth: 14
},
radar: {//雷达图形设置
name: {
textStyle: {
color: '#333333'
}
},
indicator: indicatorData,//雷达数据最大值
splitArea: {
show: false //是否显示隔断色
},
splitLine: {
lineStyle: {
color: ['#D1D1D1']//雷达的线条色
}
}
},
series: [{
type: 'radar',
data: [{
value: personData[0].value,//第一个数据线条
name: personData[0].name,
lineStyle: {
normal: {
color: '#e4b2b2'
}
},
lineStyle: {
normal: {
color: '#E4B2B2'
}
},
areaStyle: {
normal: {
color: 'rgba(255,47,47,.3)'
}
}
}, {
value: personData[1].value,//第二个数据线条
name: personData[1].name,
itemStyle: {
normal: {
color: '#FF5758'
}
},
itemStyle: {
normal: {
color: '#FFD52F'
}
},
areaStyle: {
normal: {
color: 'rgba(255,204,51,.5)'
}
}
}]
}]
};;
myChart.setOption(option);
}
//生成雷达图
var indicatorData = [//雷达图最大值设置
{ name: '客户向导', max: 10 },
{ name: '信任协作', max: 10 },
{ name: '鼓励创新', max: 10 },
{ name: '高效执行', max: 10 },
{ name: '战略选择', max: 10 },
{ name: '精细管理', max: 10 },
{ name: '成就团队', max: 10 },
{ name: '专 业 力', max: 10 },
{ name: '学习敏锐度', max: 10 },
{ name: '客户向导', max: 10 }
];
//具体的雷达图数据
var personData = [{ name: '王二三', value: [2.7, 5.2, 3.3, 7.8, 3.5, 6.5, 6.6, 3.4, 7.9, 4.8] }, { name: '平均', value: [3.7, 4.2, 6.3, 6.8, 3.2, 8.5, 7.6, 8.4, 5.9, 4.8] }]; createRadarChart(indicatorData, personData);//执行函数

echar生成雷达图的更多相关文章

  1. 用pChart生成雷达图图片

    需求 :由于工作需要,需要在一张背景图上添加这一张雷达图,之后图片可以在微信中长按保存.所以说我必须生成一张带有雷达图的图片第一反应是用百度echars雷达图做动态显示,之后截图.考虑到工作量和效率, ...

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

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

  3. Excel 2010高级应用-雷达图(六)

    Excel 2010高级应用-雷达图(六) 基本操作如下: 1.新建空白Excel文档,并命名雷达图 2.单击"插入",并找到雷达图图样 3.单击雷达图图样,在空白文档上生成图框, ...

  4. C# 使用GDI绘制雷达图

    最近项目要用C#实现画一个雷达图,搜了搜网上竟然找不到C#画雷达图的解决方案,那么自己实现一个吧 实现效果如下图: 代码如下: public static class RadarDemo { ; ; ...

  5. Mesh绘制雷达图(UGUI)

    参考资料:http://www.cnblogs.com/jeason1997/p/5130413.html ** 描述:雷达图 刷新 radarDate.SetVerticesDirty(); usi ...

  6. Silverlight 雷达图和一种特殊泡泡画法

    原文:Silverlight 雷达图和一种特殊泡泡画法 自上次发了雷达图,也没怎么说一下. 这次又做了一种图,继续共享一下,就是以一个点为中心,周围绕着几个点,用一个箭头与中心相连并带有某些信息.圆 ...

  7. 第三方Charts绘制图表四种形式:饼状图,雷达图,柱状图,直线图

    对于第三方框架Charts(Swift版本,在OC项目中需要添加桥接头文件),首先要解决在项目中集成的问题,集成步骤: 一.下载Charts框架 下载地址:https://github.com/dan ...

  8. 使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行

    使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行 前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的 ...

  9. Python成绩单雷达图

    1numpy库 numpy 是 python 的科学计算库 部分功能: 1.使用numpy读取txt文件 # dtype = "str":指定数据格式 # delimiter = ...

随机推荐

  1. LeetCode--083--删除排序链表中的重复元素

    问题描述: 给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次. 示例 1: 输入: 1->1->2 输出: 1->2 示例 2: 输入: 1->1->2-&g ...

  2. Confluence 6 为 Active Directory 配置一个 SSL 连接

    如果你希望配置 Microsoft Active Directory 的读写权限,你需要在你的 Confluence 服务器和JVM keystore 上安装 Active Directory 服务器 ...

  3. Vladik and Entertaining Flags CodeForces - 811E (并查集,线段树)

    用线段树维护每一块左右两侧的并查集, 同色合并时若不连通则连通块数-1, 否则不变 #include <iostream> #include <algorithm> #incl ...

  4. Shell脚本的学习(一)

    Shell脚本的学习(一) 一)代码式shell脚本简介 1.下载 Xshell 5 建一个文件夹 mkdri home/data ; 1)查看一个在data里建一个1.sh 查看是否建立成功. 2) ...

  5. intel python加速效果初探

    python3安装intel的加速库: conda config --add channels intel conda create --name intelpy intelpython3_full ...

  6. 51nod1615

    题解: 首先,当1+2+...+n=x时,答案就是n 如果1+2+...+n不会等于x,那么找一个最小的n,让1+2+....+n>x并且(1+2+.....+n-x)%2=0 代码: #inc ...

  7. delphi 高亮选中MEMO某一行

    http://www.delphitop.com/html/kongjian/2641.html选中第5行 //转到指定行并选中这行的文本 procedure SelectLine(Memo1: TM ...

  8. 基于struts2和hibernate的登录和注册功能——完整实例

    1.该项目使用MySQL数据库,数据库名为test,表名info,如图所示: 2.配置web.xml(Struts2使用) <?xml version="1.0" encod ...

  9. MyEclipse持续性开发教程:用JPA和Spring管理数据(三)

    MyEclipse红运年货节 在线购买低至69折!火爆开抢>> [MyEclipse最新版下载] 本教程介绍了MyEclipse中的一些基于JPA / Spring的功能.有关设置JPA项 ...

  10. session进行增删改查操作

    一般将针对数据库的操作放在事物里面, 开始事物:session.beginTransaction(); 获取事物:session.getTransaction(); 提交事物:transaction. ...