echar生成雷达图
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生成雷达图的更多相关文章
- 用pChart生成雷达图图片
需求 :由于工作需要,需要在一张背景图上添加这一张雷达图,之后图片可以在微信中长按保存.所以说我必须生成一张带有雷达图的图片第一反应是用百度echars雷达图做动态显示,之后截图.考虑到工作量和效率, ...
- 关于echarts生成雷达图的一些参数介绍
export const industryFactorOption = { title: { text: '雷达图', textStyle: { color: 'rgba(221,221,221,1) ...
- Excel 2010高级应用-雷达图(六)
Excel 2010高级应用-雷达图(六) 基本操作如下: 1.新建空白Excel文档,并命名雷达图 2.单击"插入",并找到雷达图图样 3.单击雷达图图样,在空白文档上生成图框, ...
- C# 使用GDI绘制雷达图
最近项目要用C#实现画一个雷达图,搜了搜网上竟然找不到C#画雷达图的解决方案,那么自己实现一个吧 实现效果如下图: 代码如下: public static class RadarDemo { ; ; ...
- Mesh绘制雷达图(UGUI)
参考资料:http://www.cnblogs.com/jeason1997/p/5130413.html ** 描述:雷达图 刷新 radarDate.SetVerticesDirty(); usi ...
- Silverlight 雷达图和一种特殊泡泡画法
原文:Silverlight 雷达图和一种特殊泡泡画法 自上次发了雷达图,也没怎么说一下. 这次又做了一种图,继续共享一下,就是以一个点为中心,周围绕着几个点,用一个箭头与中心相连并带有某些信息.圆 ...
- 第三方Charts绘制图表四种形式:饼状图,雷达图,柱状图,直线图
对于第三方框架Charts(Swift版本,在OC项目中需要添加桥接头文件),首先要解决在项目中集成的问题,集成步骤: 一.下载Charts框架 下载地址:https://github.com/dan ...
- 使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行
使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行 前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的 ...
- Python成绩单雷达图
1numpy库 numpy 是 python 的科学计算库 部分功能: 1.使用numpy读取txt文件 # dtype = "str":指定数据格式 # delimiter = ...
随机推荐
- 雷林鹏分享:Ruby 变量
Ruby 变量 变量是持有可被任何程序使用的任何数据的存储位置. Ruby 支持五种类型的变量.您已经在前面的章节中大概了解了这些变量,本章节将为您详细讲解这五种类型的变量. Ruby 全局变量 全局 ...
- English trip -- VC(情景课)4 B Parts of the body 身体部位
xu言: ... Words eye 读音同 I 眼睛 nose 鼻子 ear 耳朵 tooth 牙齿 mouth 嘴 hair 头发 eyebrow 眉毛 cheek 脸颊 n ...
- python pipe stdout 实现cat|grep 功能
从hdfs里获取希望的数据: import subprocess for day in range(22, 23): for h in range(17, 24): filename = " ...
- nginx支持返回相对路径
一.问题:http://192.168.72.4/bm-crm/ 局域网可以访问[实际指向了192.168.80.1:8081/brm-crm] http://59.41.111.24:8280/b ...
- JavaScript学习总结(二)——逻辑Not运算符详解
在JavaScript 中,逻辑NOT运算符与C和Java中的逻辑 NOT 运算符相同,都由感叹号(!)表示.与逻辑 OR 和逻辑 AND 运算符不同的是,逻辑 NOT 运算符返回的一定是 Boole ...
- 《程序员面试金典》习题解答(C/C++)
一.数据结构 1.数组与字符串 1.1 实现一个算法,确定一个字符串的所有字符是否全都不同.假使不允许使用额外的数据结构,又该如何处理? /* 假设字符集为ASCII字符串,那么字符串至多有256个 ...
- SimpleXML php 解析xml 的方法
SimpleXML是PHP5后提供的一套简单易用的xml工具集,可以把xml转换成方便处理的对象,也可以组织生成xml数据.不过它不适用于包含namespace的xml,而且要保证xml格式完整(we ...
- Oracle 与Sql Server常用函数对比
来自:http://topic.csdn.net/u/20080704/08/b2b8c42f-b0d6-4cda-98b1-6e4a279b4ff8.html 感谢楼主 函数 SQLServer和O ...
- 使用Mockito时遇到的一些问题
最近在使用Mockito时遇到了几个比较tricking的问题,在这里记录一下. 1.如果方法的参数或者返回类型是泛型通配符相关的(如<?>,<? extends XXX>), ...
- Java数字签名算法--RSA
签名具有的特性: 安全性 抗否认性 数字签名:带有密钥(公钥.私钥)的消息摘要算法(使用私钥进行签名,使用公钥进行验证) 数字签名算法:RSA.DSA.ECDSA 数字签名特性: 验证数据完整性 认证 ...