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. Spark-shell错误:Missing Python executable 'python', defaulting to ...

    最近博主因为学习<云计算导论>一课,需要在Windows上搭建Saprk,故在网上找了相关教程搭建,步骤如下: 1. Scala 2.Spark 3.Handoop 但是不管博主怎么修正, ...

  2. lamp之apache配置https访问

    配置apache 使用https 注:怕其他人由于路径的原因出问题,首先声明一下,本人apache的安装目录为 : /usr/local/httpd2.4.25,如果不是,请参考进行配置 注: 对于如 ...

  3. 网络yum源制作

    思路:在网络上准备一个主机,在其中安装一个web服务器软件(比如apache),然后创建一个目录,在这个目录中准备上yum仓库的全部资源,如果用户可以通过网络访问到该主机的这个目录,那么这个目录就成为 ...

  4. tarjan求强连通分量

    http://poj.org/problem?id=3180 //#include<bits/stdc++.h> #include<iostream> #include< ...

  5. linux下压力测试工具ab的使用

    一.安装 [root@node2 logs]# yum install httpd-tools 已加载插件:fastestmirror Loading mirror speeds from cache ...

  6. Linux下Samba的安装和使用

    一. samba的安装: sudo apt-get insall samba sudo apt-get install smbfs 二. 创建共享目录: mkdir /home/phinecos/sh ...

  7. 解决Oracle数据库空间不足问题

    //查询表空间的大小以及文件路径地址select tablespace_name, file_id, file_name,round(bytes/(1024*1024),0) total_space ...

  8. CMake support in Visual Studio

    Visual Studio 2017 introduces built-in support for handling CMake projects. This makes it a lot simp ...

  9. Debian 9 Stretch国内常用镜像源

     随着Debian 9的普及,但由于伟大的墙的存在,那就有必要整理一下国内的镜像站点. 1.使用说明 一般情况下,修改/etc/apt/sources.list文件,将Debian的默认源地址改成新的 ...

  10. MacbookPro下载word文件显示dms怎么办

    方法:直接改扩展名!!!!!!!!!! 如果你下载的是word的话,把最后的扩展名.dms改成.doc就可以了. 同理,如果你下载的是rar的话,改成rar就好了.