首页 > 其他分享 >echarts记录篇(六):雷达图记录

echarts记录篇(六):雷达图记录

时间:2024-01-17 11:13:01浏览次数:21  
标签:name 记录 color max 9000 雷达 data echarts pur

(data)=>{
    console.log(data);
        var categories1 = [];
        var categories2 = [];
        var name = [];
        var data1 = []; 
        var data2 = [];  
        
        for(var i=0 ; i< data.length ; i++){ 
            if(name.indexOf(data[i]['pur_yr']) == -1){
                name.push(data[i]['pur_yr'])
            } 
        } 
        for(var i=0 ; i< data.length ; i++){ 
            if(name[0] == data[i]['pur_yr']){
                //categories1.push(data[i]['pur_org_no'])
                categories1.push({name:data[i]['pur_org_no'],max:40})
                data1.push(data[i]['pur_mth_amt'])
            }else{
                categories2.push(data[i]['pur_org_no'])
                data2.push(data[i]['pur_mth_amt'])
            }
            
        } 
        console.log("data1"+data1) 
        console.log("data2"+data2)  
    return {
                title: {
                    
                },
                grid: {
                    top: "2%",
                    left: "0%",
                    right: "0",
                    bottom: "5%", //设置图例与图表间的距离
                    containLabel: true,
                },
                tooltip: {
                    textStyle:{fontSize:12},
                   appendToBody:true,    
                  valueFormatter:function (value) {
                if(isNaN(value)){
                    return "-"
                }else{
                    return value.toFixed(1);
                }
                  }
            },
                
                radar: {
                    // shape: 'circle',
                    center: ['50%', '50%'],
                    radius: 115,
                    shape: 'circle',
                    name: {
                        //每个方向的文字配置:也就是,本科,大专,硕士,博士这些字的配置
                        show: true,
                        fontSize: 18,
                        fontFamily: "Source Han Sans CN",
                        color: "#5DB3DC",
                        // padding: [3, 5],
                    },
                    // 设置雷达图中间射线的颜色
                    axisLine: {
                        lineStyle: {
                            color: 'rgb(93,179,220,0.3)',
                        },
                    },
                    splitLine: {                        // (这里是指所有圆环)坐标轴在 grid 区域中的分隔线。
                        show: false,
                        lineStyle: {
                            color: '#0B6AE2',                       // 分隔线颜色
                            width: 2,                            // 分隔线线宽
                        }
                    },
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ['rgb(2,51,162,0.3)', 'rgb(11,106,226,0.3)','rgb(2,51,162,0.3)', 'rgb(11,106,226,0.3)','rgb(2,51,162,0.3)']
                        },
                    },
                    indicator: categories1
                    //indicator: [{name:'计算机产业',max:9000},{name:'高科技工程',max:9000},{name:'产业园区',max:9000},{name:'产业链供应链服务',max:9000},{name:'智能制造',max:9000},{name:'网络安全',max:9000},{name:'高新电子',max:9000},{name:'数据应用',max:9000},{name:'集成电路',max:9000}]
                },
                series: [{
                    name: '',
                    type: 'radar',
                    symbolSize: 10, // 拐点的大小
                    areaStyle: {
                        normal: {
                        width: 1,
                        opacity: 0.2,
                        },
                    },
                    // areaStyle: {normal: {}},
                    data: [
                        {
                            name: name[1],
                            value: data2,
                            itemStyle: {
                                //雷达图每一个焦点的样式 ,此颜色一改,图例颜色即跟着改
                                normal: {
                                    color: "#01B6FE",
                                    lineStyle: {
                                        color: "#01B6FE",
                                    },
                                },
                            },
                        }
                    ]
                },{
                    name: '',
                    type: 'radar',
                    symbolSize: 10, // 拐点的大小
                    areaStyle: {
                        normal: {
                        width: 1,
                        opacity: 0.2,
                        },
                    },
                    // areaStyle: {normal: {}},
                    data: [
                        {
                            name: name[0],
                            value: data1,
                            itemStyle: {
                                //雷达图每一个焦点的样式 ,此颜色一改,图例颜色即跟着改
                                normal: {
                                    color: "#FFE46B",
                                    lineStyle: {
                                        color: "#FFE46B",
                                    },
                                },
                            },
                        }
                    ]
                }]
            };
    }

 

标签:name,记录,color,max,9000,雷达,data,echarts,pur
From: https://www.cnblogs.com/fkcqwq/p/17969521

相关文章

  • 文献笔记的记录方法
    来自:https://www.bilibili.com/video/BV1hT4y1N7An/?spm_id_from=333.337.search-card.all.click&vd_source=ee9c33f6c304713c69c46f04782a13b2:阅读文献做笔记可以提高阅读效率经典的奠基性的高引用的才需要做详细的笔记记录这些内容:1.基本信息写上文献的标题、作者、发......
  • 记录--终于搞懂了网盘网页是怎么唤醒本地应用了
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助写在前面用百度网盘举例,可以通过页面打开本机的百度网盘软件,很多软件的网站页面都有这个功能。这个事情一直令我比较好奇,这次终于有空抽时间来研究研究了,本篇讲的是Windows的,mac的原理与之类似,Mac文章已发布:(Mac版......
  • 记录一次线上内存溢出排查详细过程
    现象生产上频繁出现调用异常的信息查询生产服务器日志初步评估:查看了这个方法没有性能瓶颈,应该是服务本身出现问题、后来找运维要了一下线上dumpfile文件:内存溢出、猜测可能存在内存泄漏MAT初步排查 从第一个页面来看,内存到达1.7G出现内存溢出问题一:为什么1.7G就溢出了,......
  • shell脚本使用 $? 记录返回值
    在shell脚本中,使用$?来获取上一次命令执行时的返回状态。实际使用中需要注意$?可能会被清零或覆盖,最好先使用中间变量存起来,以后使用该中间变量;请看如下几种案例的$?值的变化:1)shellA文件调用 shellB文件  shellB文件:①若有$?=2......
  • Unity报错记录->ArgumentNullException: Value cannot be null. Parameter name: _uni
    问题描述项目报错ArgumentNullException:Valuecannotbenull.Parametername:_unity_self不会影响项目正常运行,但是在DeBug模式下会一直卡住,非常恶心。解决方法删除项目中的Library文件夹,重新加载项目......
  • echarts 中国地图南海诸岛展示为简图
    echarts官网,地理位置/地图(https://echarts.apache.org/examples/zh/index.html#chart-type-map)基于“香港”示例,进行中国地图的展示1、下载中国地图的json文件,并引用https://datav.aliyun.com/portal/school/atlas/area_selectorimportmapDatafrom'@/utils/chinaMap.json......
  • SpringBoot自定义注解实现操作日志记录
    1、增加依赖<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-aop</artifactId><version>${spring-version}</version>......
  • 自定义echarts绘制直方图,XY轴互调Demo
    1constcolorList=[2'#4f81bd',3'#c0504d',4'#9bbb59',5'#604a7b',6'#948a54',7'#e46c0b'8];9constdata=[10[10,16,3,'A'],11[16,18,15,&#......
  • 激光雷达技术、数据和应用简介
    激光雷达技术、数据和应用简介介绍光探测和测距(激光雷达)测绘是一种公认的生成关于地球形状和表面特征的精确和直接地理参考空间信息的方法。激光雷达测绘系统及其赋能技术的最新进展使科学家和测绘专业人员能够以比以往任何时候都更高的精度、精度和灵活性,在大范围内检查自然和......
  • Spring学习记录之Spring6整合JUnit4-JUnit5
    Spring学习记录之Spring6整合JUnit4-JUnit5前言这篇文章是我第二次学习b站老杜的spring相关课程所进行的学习记录,算是对课程内容及笔记的二次整理,以自己的理解方式进行二次记录,其中理解可能存在错误,欢迎且接受各位大佬们的批评指正;关于本笔记,只是我对于相关知识遗忘时快速查阅......