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

(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",
                                    },
                                },
                            },
                        }
                    ]
                }]
            };
    }

 

posted @ 2024-01-17 11:03  夏小夏吖  阅读(29)  评论(0编辑  收藏  举报