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. c++ protected 访问限定

    class A { protected: int mA; }; class B : public A{ public: void Func() { mA = 0; // ok A *a = this; ...

  2. 20175213 2018-2019-2 《Java程序设计》第8周学习总结

    教材学习内容总结 1:泛型主要目的是建立具有类型安全的集合框架,如链表,散列映射等数据结构. 泛型类的声明: class People<E> People是泛型类的名称,E是其中泛型,E可 ...

  3. 其它 nginx

    原地址忘了 常用命令: 在CMD下输入如下命令,可以强行关闭所有Nginx进程 taskkill /f /im nginx.exe start nginx nginx -s stop nginx -s ...

  4. PHP 构造方法 __construct()和PHP 析构方法 __destruct()

    PHP 构造方法 __construct() 允许在实例化一个类之前先执行构造方法. 构造方法 构造方法是类中的一个特殊方法.当使用 new 操作符创建一个类的实例时,构造方法将会自动调用,其名称必须 ...

  5. Ubuntu---添加输入法

    摘要:Ubuntu 在刚刚安装好之后,默认是不支持直接输入中文的,所以我们需要安装支持中文的输入法.网络上面一般推荐使用的输入法是 Fcitx(小企鹅输入法),我们今天就来安装和配置它. step1: ...

  6. leetcode 动态规划类型题

    1,Triangle int mininumTotal(vector<vector<int>>& triangle) { ; i >= ; --i) { ; j ...

  7. Android 自定义的圆角矩形ImageView 工具类

    上图看效果 自定义圆角矩形ImageView工具类 package com.wechaotou.utils; import android.content.Context; import androi ...

  8. 算法练习LeetCode初级算法之数学

    Fizz Buzz class Solution { public List<String> fizzBuzz(int n) { List<String> list=new L ...

  9. easyUI添加修改tab页(toolbar)

    代码: <div id="editdialos" class="easyui-dialog" title="虚机配置修改" data- ...

  10. 2018-2019-2 20165315 《网络对抗技术》Exp2+ 后门进阶

    2018-2019-2 20165315 <网络对抗技术>Exp2+ 后门进阶 一.实验要求 以下三个课题三选一 1.其他专用后门工具研究(CROSSRAT ...) 2.恶意代码绑定技术 ...