关于echarts生成雷达图的一些参数介绍
export const industryFactorOption = {
title: {
text: '雷达图',
textStyle: {
color: 'rgba(221,221,221,1)', //标题颜色
fontSize: 14,
lineHeight: 20,
},
// 标题的位置,此时放在图的底边
left: 'center',
top: 'bottom',
},
// 图表的位置
grid: {
position: 'center',
},
tooltip : {
//雷达图的tooltip不会超出div,也可以设置position属性,position定位的tooltip 不会随着鼠标移动而位置变化,不友好
confine: true,
enterable: true, //鼠标是否可以移动到tooltip区域内
},
radar: {
shape: 'circle',
splitNumber: 3, // 雷达图圈数设置
name: {
textStyle: {
color: '#838D9E',
},
},
// 设置雷达图中间射线的颜色
axisLine: {
lineStyle: {
color: 'rgba(131,141,158,.1)',
},
},
indicator: [{
name: '通信', max: 30,
//若将此属性放在radar下,则每条indicator都会显示圈上的数值,放在这儿,只在通信这条indicator上显示
axisLabel: {
show: true,
fontSize: 12,
color: '#838D9E',
showMaxLabel: false, //不显示最大值,即外圈不显示数字30
showMinLabel: true, //显示最小数字,即中心点显示0
},
},
{ name: '零售', max: 30},
{ name: '电力', max: 30},
{ name: '交通', max: 30},
{ name: '食品', max: 30},
{ name: '建筑', max: 30},
{ name: '银行', max: 30},
{ name: '汽车', max: 30},
{ name: '电子工程', max: 30},
],
//雷达图背景的颜色,在这儿随便设置了一个颜色,完全不透明度为0,就实现了透明背景
splitArea : {
show : false,
areaStyle : {
color: 'rgba(255,0,0,0)', // 图表背景的颜色
},
},
splitLine : {
show : true,
lineStyle : {
width : 1,
color : 'rgba(131,141,158,.1)', // 设置网格的颜色
},
},
},
series: [{
name: '雷达图', // tooltip中的标题
type: 'radar', //表示是雷达图
symbol: 'circle', // 拐点的样式,还可以取值'rect','angle'等
symbolSize: 8, // 拐点的大小 areaStyle: {
normal: {
width: 1,
opacity: 0.2,
},
},
data: [
{
value: [17, 24, 27, 29, 26, 16, 13, 17, 25],
name: '2018-07',
// 设置区域边框和区域的颜色
itemStyle: {
normal: {
color: 'rgba(255,225,0,.3)',
lineStyle: {
color: 'rgba(255,225,0,.3)',
},
},
},
//在拐点处显示数值
label: {
normal: {
show: true,
formatter: (params: any) => {
return params.value
},
},
},
},
{
value: [5, 20, 19, 11, 22, 17, 8, 19, 16],
name: '',
itemStyle: {
normal: {
color: 'rgba(60,135,213,.3)',
lineStyle: {
width: 1,
color: 'rgba(60,135,213,.3)',
},
},
},
},
{
value: [7, 18, 19, 13, 22, 17, 8, 25, 9],
name: '',
itemStyle: {
normal: {
color: 'rgba(255,74,74,.3)',
lineStyle: {
width: 1,
color: 'rgba(255,74,74,.3)',
},
},
},
},
],
}],
}
---------------------
原文:https://blog.csdn.net/csdn_zsdf/article/details/81366738
关于echarts生成雷达图的一些参数介绍的更多相关文章
- echar生成雷达图
function createRadarChart(indicatorData, personData) { var myChart = echarts.init(document.getElemen ...
- 用pChart生成雷达图图片
需求 :由于工作需要,需要在一张背景图上添加这一张雷达图,之后图片可以在微信中长按保存.所以说我必须生成一张带有雷达图的图片第一反应是用百度echars雷达图做动态显示,之后截图.考虑到工作量和效率, ...
- echarts雷达图
用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- Excel 2010高级应用-雷达图(六)
Excel 2010高级应用-雷达图(六) 基本操作如下: 1.新建空白Excel文档,并命名雷达图 2.单击"插入",并找到雷达图图样 3.单击雷达图图样,在空白文档上生成图框, ...
- C# 使用GDI绘制雷达图
最近项目要用C#实现画一个雷达图,搜了搜网上竟然找不到C#画雷达图的解决方案,那么自己实现一个吧 实现效果如下图: 代码如下: public static class RadarDemo { ; ; ...
- echarts雷达图点击事件
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...
- Echarts数据可视化series-radar雷达图,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- echarts雷达图点击事件 包含(2.x,3.85,4.02)测试
最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...
- echarts 雷达图的个性化设置
echarts 雷达图的个性化设置 function test() { let myChart = echarts.init(document.getElementById('levelImage') ...
随机推荐
- vue项目tips
在main.js引入了封装好的各组件,包括echarts.自定义组件等
- Java采用RSA加密及解密技术的有关Maven项目的配置流程:
第一步: 获得RSA公钥私钥(秘钥格式:PKCS#8 ,测试使用的是无私钥密码的) 公钥: -----BEGIN PUBLIC KEY----- MIGfMA0GCSqGSIb3DQEBAQUAA4G ...
- ruby在index页面显示货币符号
1.显示人民币符号 <td><%= number_to_currency product.price, unit: "¥" %></td> 2. ...
- html注册栏网页练习代码
html body> <form action="#" method="get"> <div> ...
- soa 和微服务的区别
soa beased applications are compromised of more loosely coupled componets that use an enterprise ser ...
- del_cursor 批量删除游标
declare cursor [del_cursor] is select a.*, a.rowid row_id from [table_name] a order by a.rowid; ...
- C# 木马功能的简单实现
1.首先解决开机启动木马.通过建立开机启动服务达到目的:2.伪装问题.通过c#反射性能,将正常的.net的exe文件添加监控盗传播取等其他功能,执行正常程序同时,后台悄悄释放windows服务,通过服 ...
- pyautogui 文档(二):鼠标控制
0,0 X increases --> +---------------------------+ | | Y increases | | | | 1920 x 1080 screen | | ...
- laravel view not found
在windows开发的laravel项目,部署到Linux服务器找不到视图,代码格式可能是这样的 return view('news\list'); 原因是在Linux下不能识别反斜杠路径,解决办法是 ...
- 总结一下我的dmp第一个版本 也是最后一个版本
刚刚接手了一个新项目-DMP,目前已经开发联调完成,等待测试上线,所以现在来总结一下. 本来是一个前辈在负责,四月底离职了,他离职前我花了一周把这个项目交接了过来,大致熟悉了项目的业务流程以及代码 ...