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 拖拽字段 将[日期]托到列 ...
随机推荐
- 5、lvs使用进阶(01)
四层.七层负载均衡的区别 https://jaminzhang.github.io/lb/L4-L7-Load-Balancer-Difference/ netfilter/iptables简介 ...
- Java常见异常:Exception in thread "main" java.lang.NoClassDefFoundError
在某一路径下执行编译好的class文件出错. 异常如下: E:\liwy>java Test98 Exception in thread "main" java.lang.N ...
- 一般删除网页数据和jquery下使用Ajax删除数据的区别
1. 一般删除网页数据 就是指用户在点击删除的时候,会跳转到DeleteUser.ashx一般处理程序中,并且通过get传参的方式传递一个id的参数,然后在后台处理 <a href='Delet ...
- Eclipse使用之将Git项目转为Maven项目, ( 注意: 最后没有pom.xml文件的, 要转化下 )
Eclipse使用之将Git项目转为Maven项目(全图解) 2017年08月11日 09:24:31 阅读数:427 1.打开Eclipse,File->Import 2.Git->Pr ...
- 人脸识别demo使用教程
最近在研究虹软家的arcface 人脸识别 demo,现在就给大家分享一下官方的demo**工程如何使用? **1.下载代码:git clone https://github.com/asdfqwra ...
- 学习笔记7—python 列表,数组,矩阵两两转换tolist()
from numpy import * a1 =[[1,2,3],[4,5,6]] #列表 print('a1 :',a1) #('a1 :', [[1, 2, 3], [4, 5, 6]]) ...
- 牛客练习赛26 xor序列
xor序列 思路:线性基 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimize(4) #include< ...
- vue 脚手架搭建新项目以及element-ui等vue组件的使用
vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...
- jenkins之从0到1利用Git和Ant插件打war包并自动部署到tomcat(第五话):总结以及build.xml文件
前面基本上把整个配置过程都完整地串起来了,包括可能遇到的难点,按照那个套路应该可以配置好自动打包发布的功能.简单总结下我的学习过程,以及遇到问题是怎样解决的. 准备一个项目源码 刚开始在github和 ...
- Getting started with Processing 第十三章——延伸(2)
与 Arduino 联动 在 Processing 中,可以通过:import processing.serial.* Serial port; //声明串口对象port = new Serial(t ...