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);//执行函数
时间: 2024-11-05 05:25:52

echar生成雷达图的相关文章

用pChart生成雷达图图片

需求 :由于工作需要,需要在一张背景图上添加这一张雷达图,之后图片可以在微信中长按保存.所以说我必须生成一张带有雷达图的图片第一反应是用百度echars雷达图做动态显示,之后截图.考虑到工作量和效率,放弃.改为pchart 直接生成雷达图图片 然后用imagick拓展贴到背景图上面.由于imagick攻略比较详细,这里不做赘述,而pchart中文文档则比较匮乏,所以简略介绍下. 第一步 在pchart官网下载类库 http://www.pchart.net/download  建议在本地环境调试

雷达图

该雷达图是依赖于Echarts框架的. 1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <title>ECharts</title> 5 <script src="js/jquery-2.1.3.js" type="text/javascript" charset="utf-8"></scr

在Unity中使用uGUI绘制自定义图形(饼状图 雷达图)

饼状图或者是雷达图是根据属性自动生成的自定义图形.这里展示了如何使用uGUI完成这一功能. 先附上我制作雷达图的控件的代码  UIPropWidget.cs using UnityEngine; using System.Collections.Generic; using UnityEngine.UI; /* * * 2 6 * * 3 7 * * 0 1 5 4 * * * 2 6位为属性0 3为属性1 0为属性2 4为属性3 7为属性4 */ public class UIPropWidg

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

原文:Silverlight 雷达图和一种特殊泡泡画法 自上次发了雷达图,也没怎么说一下. 这次又做了一种图,继续共享一下,就是以一个点为中心,周围绕着几个点,用一个箭头与中心相连并带有某些信息.圆 和中心都可以响应鼠标事件. 我一向不会讲解所做的东西.所以大部分我直接上源码的. 简单讲解一下: 代码结构分为4部分, 1. 首先是画布,其实就是一个canvas因为现在只有二种图, 一个雷达画布 RadarCanvas(比较特殊),和一个二维坐标画布 CoorCanvas,都派生自ChartCan

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

使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行 前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的效果如图所示: 后来查资料,发现这个标签的文字是可以自定义的,定义方式如下: 1 formatter: function(text){ 2 var strlength = text.length; 3 if(strlength % 2 == 1){ 4 text = text.replace(/\S

WPF 雷达图

雷达图逻辑同玫瑰图差不多,不同的地方在于绘制雷达网络,也就是蜘蛛网这样的底图. 界面代码 <UserControl x:Class="Painter.RadarControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc=&qu

c#画图之雷达图

public JsonResult DrawRadar() { List<Color> colors = new List<Color>() { Color.FromArgb(255,182,193), Color.FromArgb(238,130,238), Color.FromArgb(220,20,60), Color.FromArgb(153,50,204), Color.FromArgb(30,144,255), Color.FromArgb(60,179,113), C

数据可视化分析(柱状图、饼图、折线图、雷达图)

分析文件’课程成绩.xlsx’,至少要完成内容: 1)每年不同班级平均成绩情况 2)不同年份总体平均成绩情况 3)不同性别学生成绩情况,并分别用合适的图表展示出三个内容的分析结果. 导入相应的库 from functools import reduce import xlrd from flask import Flask, jsonify, render_template, request, url_for from pyecharts import Line,Bar,Pie,Radar py

添加ModelGoon插件Eclipse自动生成UML图

下载ModelGoonjar包 http://download.csdn.net/detail/u011070297/8366021 下载完该jar之后,直接拷贝到Eclipse安装目录下的dropins目录下,重启Eclipse即可  如何使用 安装成功后,file=>new=>other菜单里面会多出一项ModelGoon Diagrams,在自己已有的java工程中新建一个class diagram,用以生成类图.创建完成后你会发现生成了一个.mgc后缀的文件,现在你可以用这个文件创建自