1. function createRadarChart(indicatorData, personData) {
  2. var myChart = echarts.init(document.getElementById('fl2Grid'));
  3.  
  4. var option = {
  5. legend: {//图例设置
  6. data: [{ name: personData[0].name, icon: 'rect' }, { name: personData[1].name, icon: 'rect' }],//名字和图形
  7. left: 0,
  8. itemGap: 30,
  9. itemWidth: 14
  10. },
  11. radar: {//雷达图形设置
  12. name: {
  13. textStyle: {
  14. color: '#333333'
  15. }
  16. },
  17. indicator: indicatorData,//雷达数据最大值
  18. splitArea: {
  19. show: false //是否显示隔断色
  20. },
  21. splitLine: {
  22. lineStyle: {
  23. color: ['#D1D1D1']//雷达的线条色
  24. }
  25. }
  26. },
  27. series: [{
  28. type: 'radar',
  29. data: [{
  30. value: personData[0].value,//第一个数据线条
  31. name: personData[0].name,
  32. lineStyle: {
  33. normal: {
  34. color: '#e4b2b2'
  35. }
  36. },
  37. lineStyle: {
  38. normal: {
  39. color: '#E4B2B2'
  40. }
  41. },
  42. areaStyle: {
  43. normal: {
  44. color: 'rgba(255,47,47,.3)'
  45. }
  46. }
  47. }, {
  48. value: personData[1].value,//第二个数据线条
  49. name: personData[1].name,
  50. itemStyle: {
  51. normal: {
  52. color: '#FF5758'
  53. }
  54. },
  55. itemStyle: {
  56. normal: {
  57. color: '#FFD52F'
  58. }
  59. },
  60. areaStyle: {
  61. normal: {
  62. color: 'rgba(255,204,51,.5)'
  63. }
  64. }
  65. }]
  66. }]
  67. };;
  68. myChart.setOption(option);
  69. }
  70. //生成雷达图
  71. var indicatorData = [//雷达图最大值设置
  72. { name: '客户向导', max: 10 },
  73. { name: '信任协作', max: 10 },
  74. { name: '鼓励创新', max: 10 },
  75. { name: '高效执行', max: 10 },
  76. { name: '战略选择', max: 10 },
  77. { name: '精细管理', max: 10 },
  78. { name: '成就团队', max: 10 },
  79. { name: '专 业 力', max: 10 },
  80. { name: '学习敏锐度', max: 10 },
  81. { name: '客户向导', max: 10 }
  82. ];
  83. //具体的雷达图数据
  84. 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] }];
  85.  
  86. 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. Linux Used内存到底哪里去了?

    原创文章,转载请注明: 转载自系统技术非业余研究 本文链接地址: Linux Used内存到底哪里去了? 前几天 纯上 同学问了一个问题: 我ps aux看到的RSS内存只有不到30M,但是free看 ...

  2. thinkphp3.2导出

    public function test() { set_time_limit(0); ini_set('memory_limit', '500M'); //导入PHPExcel类库,因为PHPExc ...

  3. thinkphp3.2 输入框默认值

    1,我们在做项目的时候输入框有的时候要提示用户输入什么,当用户输入值的时候也不用客户删除,用户只管输入.这里我们就用一个很简单的就OK了. <input type="text" ...

  4. spark submit 入门

    spark dirver本质是一个spark集群的驱动程序,你要调用spark集群的计算功能,必须要通过它! from pyspark import SparkConf, SparkContext c ...

  5. HDU 3720 深搜 枚举

    DES:从23个队员中选出4—4—2—1共4种11人来组成比赛队伍.给出每个人对每个职位的能力值.给出m组人在一起时会产生的附加效果.问你整场比赛人员的能力和最高是多少. 用深搜暴力枚举每种类型的人选 ...

  6. HDU 2891

    DESCRIPTION: 大意是说 先给你n个 同学的 上课时间.一周的第几天,开始和结束的时间点.然后对应q个出去玩的时间.要你给出谁不能出去.如果都能出去就输出none. 开始做的时候觉得每个同学 ...

  7. jsp javabean开发模式

    JSP&&JavaBean开发模式 在jsp+javabean架构中,jsp负责控制逻辑,表现逻辑,业务对象的调用 jsp+javaBean模式适合开发业务逻辑不复杂的web应用,这种 ...

  8. 快速切题 cf118A

    这教导人们一定要看题,要看题,元音包含了‘y’,完毕,要看题啊 #include <cstring> #include <cstdio> #include <cctype ...

  9. Python 数据类型--Bytes类型

    一.Bytes类型 在Python3以后,字符串和bytes类型彻底分开了.字符串是以字符为单位进行处理的,bytes类型是以字节为单位处理的. bytes数据类型在所有的操作和使用甚至内置方法上和字 ...

  10. PHP parse_url 一个好用的函数

    array parse_url ( string $url ) 本函数解析一个 URL 并返回一个关联数组,包含在 URL 中出现的各种组成部分. 对严重不合格的 URL,parse_url() 可能 ...