Echarts 简单报表系列四:雷达图
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<!-- 引入echarts.js -->
<script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>
<script>
//获取容器的id并赋值给变量myChart
var myChart = echarts.init(document.getElementById('main'));
/*用来配置参数*/
var option = {
radar :{
indicator : [
{text : '个人情况\n满分15', max : 15},
{text : '信用记录\n满分35', max : 35},
{text : '经济实力\n满分30', max : 30},
{text : '稳定情况\n满分15', max : 15},
{text : '贷款情况\n满分25', max : 25},
{text : '工作情况\n满分30', max : 30},
{text : '家庭情况\n满分15', max : 15},
{text : '保障情况\n满分15', max : 15} ],
radius : 130,
splitNumber : 10,
axisTick : {
show : true
}
}
,
series :
{
type: 'radar',
data : [
{
value : [10,22,20,10,16,15,10,12,15],
label: {
normal: {
show: true
}
}
}
]
}
};
/*调用option生成图表*/
myChart.setOption(option)
</script>
</body>
</html>
显示效果:

Echarts 简单报表系列四:雷达图的更多相关文章
- Echarts 简单报表系列三:饼状图
代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Echarts 简单报表系列二:折线图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Echarts 简单报表系列一:柱状图
见代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- RDLC报表系列(四) 矩阵
继续接上一篇的内容,本文主要是讲矩阵的内容 用到的数据源如下: DataTable dt = new DataTable(); dt.Columns.Add("FiscalYear" ...
- RDLC报表系列(一) 简单的动态数据绑定和配置
RDLC系列链接 RDLC报表系列(一) 简单的动态数据绑定和配置 RDLC报表系列(二) 行分组 RDLC报表系列(三) 总计和折叠 RDLC报表系列(四) 矩阵 RDLC报表系列(五) 简单的图 ...
- RDLC报表系列(五) 简单的图表-柱状图
继续接上一篇的内容,本文主要是讲图标的内容,本文就是简单的图标,复杂的柱状图和折线图在下一文章中介绍. 数据源还是上文RDLC报表系列(四) 矩阵中的相同 1.还是继续使用demo2的文件
- ECharts雷达图详细配置说明
雷达图表配置说明: // 指定图表的配置项和数据 var option = { backgroundColor: 'rgba(204,204,204,0.7 )', // 背景色,默认无背景 rgba ...
- 用pChart生成雷达图图片
需求 :由于工作需要,需要在一张背景图上添加这一张雷达图,之后图片可以在微信中长按保存.所以说我必须生成一张带有雷达图的图片第一反应是用百度echars雷达图做动态显示,之后截图.考虑到工作量和效率, ...
- Tableau绘制K线图、布林线、圆环图、雷达图
Tableau绘制K线图.布林线.圆环图.雷达图 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. K线图 1.1 导入数据源 1.2 拖拽字段 将[日期]托到列 ...
随机推荐
- HDU-6033 Add More Zero
There is a youngster known for amateur propositions concerning several mathematical hard problems. N ...
- Markdown 指南
Markdown 是一种轻量级的「标记语言」,使用用特殊的 Markdown 文档处理器将 Markdown 语法翻译成预设的文档格式.标题大小等,一般用于展示时输出的是 HTML.这个教程可以让使用 ...
- ASP.NET技术总结
ASP.NET是ASP相关技术的最新版本,它如何工作: (经典)ASP的后缀名是".asp",通常用VB编写:ASP.NET是".aspx"—— ASP.NET ...
- JqGrid 自定义子表格 及 自定义Json 格式数据不展示
项目第一次使用JqGrid ,发现功能强大,但由于对他不熟悉,也没有少走弯路,记录一下. 1.引用 <link href="~/Scripts/JqGrid/jqgrid/css/ui ...
- BZOJ 4584 【APIO2016】 赛艇
题目链接:赛艇 讲道理好好的Boat为啥要翻译成赛艇呢……题面中不也是划艇么…… 这道题考虑一下dp.由于划艇数量过于庞大,所以肯定不能直接记录到dp状态中.所以一个想法就是把数量离散化,然后把每个学 ...
- Codeforces 786 B. Legacy
题目链接:http://codeforces.com/contest/786/problem/B 典型线段树优化连边,线段树上的每一个点表示这个区间的所有点,然后边数就被优化为了至多${nlogn}$ ...
- 【BZOJ】3573: [Hnoi2014]米特运输
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3573 屁话一堆,就是说: 1.一棵树中的每个点的每个儿子的权值之和要等于这个点的权值 2. ...
- 算法时间复杂度的表示法O(n²)、O(n)、O(1)、O(nlogn)等是什么意思?
Java中 Set 和 List 集合 的contains()方法,检查数组链表中是否包含某元素检查数组链表中是否包含某元素,使用 Set 而不使用 List 的原因是效率问题, 前者的 set ...
- centos7 下载安装tomcat9
需要Java环境 https://www.cnblogs.com/sea-stream/p/10404360.html 官网下载安装包 wget http://archive.apache.org/d ...
- Java 中常见的各种排序算法汇总
首先,Java中自已是有排序的 说明:(1)Arrays类中的sort()使用的是“经过调优的快速排序法”;(2)比如int[],double[],char[]等基数据类型的数组,Arrays类之只是 ...