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生成雷达图的一些参数介绍的更多相关文章

  1. echar生成雷达图

    function createRadarChart(indicatorData, personData) { var myChart = echarts.init(document.getElemen ...

  2. 用pChart生成雷达图图片

    需求 :由于工作需要,需要在一张背景图上添加这一张雷达图,之后图片可以在微信中长按保存.所以说我必须生成一张带有雷达图的图片第一反应是用百度echars雷达图做动态显示,之后截图.考虑到工作量和效率, ...

  3. echarts雷达图

    用echarts展现雷达图的定制 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  4. Excel 2010高级应用-雷达图(六)

    Excel 2010高级应用-雷达图(六) 基本操作如下: 1.新建空白Excel文档,并命名雷达图 2.单击"插入",并找到雷达图图样 3.单击雷达图图样,在空白文档上生成图框, ...

  5. C# 使用GDI绘制雷达图

    最近项目要用C#实现画一个雷达图,搜了搜网上竟然找不到C#画雷达图的解决方案,那么自己实现一个吧 实现效果如下图: 代码如下: public static class RadarDemo { ; ; ...

  6. echarts雷达图点击事件

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...

  7. Echarts数据可视化series-radar雷达图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  8. echarts雷达图点击事件 包含(2.x,3.85,4.02)测试

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...

  9. echarts 雷达图的个性化设置

    echarts 雷达图的个性化设置 function test() { let myChart = echarts.init(document.getElementById('levelImage') ...

随机推荐

  1. [phvia/dkc] Docker Compose 快速构建(LNMP+Node)运行环境

    快速构建(LNMP+Node)运行环境. dkc 在此作为 docker-compose 的缩写,你可以理解为 alias dkc=docker-compose 准备 安装 docker 选择1) 从 ...

  2. PostgreSQL在windows 10上的下载和安装

    一.下载 PostgreSQL Windows版本下载地址: https://www.postgresql.org/download/windows/ 下载地址包含2个版本,根据个人喜好下载即可: 1 ...

  3. Jacobian矩阵、Hessian矩阵和Newton's method

    在寻找极大极小值的过程中,有一个经典的算法叫做Newton's method,在学习Newton's method的过程中,会引入两个矩阵,使得理解的难度增大,下面就对这个问题进行描述. 1, Jac ...

  4. MATLA总结三

    1.将分数表示转换为小数表示: vpa( ******(表达式或者变量), n(小数点后几位)) 2.将一个式子中的变量带入具体的值: subs(  y, x, [2,3,4] ) 3.用工具箱确定阶 ...

  5. MYSQL批量删除大量数据

    DELETE FROM '表' WHERE '字段'=1 会发现删除失败,因为lock wait timeout exceed的错误: 通过LIMIT参数分批删除,因为如果不用limit,删除大量数据 ...

  6. 《Orange’s》保护模式

    保护模式 完整代码 ; ========================================== ; pmtest1.asm ; 编译方法:nasm pmtest1.asm -o pmte ...

  7. java第四章接口

    接口(interface) 语法:修饰符 interface 接口名 extends 父接口1,父接口2....{ //常量定义   //方法定义} class 类名 extends 父类名 impl ...

  8. pyautogui 文档(二):鼠标控制

    0,0 X increases --> +---------------------------+ | | Y increases | | | | 1920 x 1080 screen | | ...

  9. jmeter连接oracle数据库配置

    1导入加载ojdbc.jar包(2种方法) 1)直接拷贝目录 2.

  10. 重构现有代码:Refactoring

    重构现有代码:Refactoring 1.WHY SHOULD WE REFACTOR? 1.Refactoring Improves the Design of Software Without r ...