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