ECharts——雷達圖(五邊形)

var option = {
            radar: [{
                indicator: [{
                    text: 'a頻率 \n (高於60%的用戶)',
                    max: 1000
                    },
                    {
                        name: 'b成功率 \n (高於65%的用戶)',
                        max:1000
                    },
                    {
                        name: 'c率 \n (低於40%的用戶)',
                        max:1000
                    },
                    {
                        name: 'd能力 \n (低於10%的用戶)',
                        max:1000
                    },
                    {
                        name: 'e能力 \n (低於30%的用戶)',
                        max:1000
                    }
                ],
                center: ['46%', '50%'], // 位置
                radius: 70, //大小
                startAngle: 90,  // 雷達圖的旋轉偏移量
                splitNumber: 5,  // 分層5層,當前最大1000,可理解爲每層200
                shape: 'line',
                name: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#595959', // 文字顏色
                        fontSize: 13
                    }
                },
                splitArea: {
                    areaStyle: {
                        color: ['#FFFFFF','#EEEEEE', '#FFFFFF','#EEEEEE', '#FFFFFF']
                        //圓環顏色
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(128, 128, 128, 0.1)' // 五角內部的連接線顏色
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#595959' // 每個區域的邊框顏色
                    }
                }
            }],
            series: [{
                name: '雷達圖',
                type: 'radar',
                itemStyle: {
                    emphasis: {
                        // color: 各異,
                        lineStyle: {
                            width: 4
                        }
                    }
                },
                data: [{
                    value: [200, 400, 600, 800, 1000],   // 排序從頂部→左→左下角→右下角→右側
                    lineStyle: { // 五點連接線的樣式。
                        normal: {
                            opacity: 1, // 圖形透明度,
                            color: '#1F6AFB'
                        }
                    },
                    itemStyle: { // 單個拐點標誌的樣式設置。
                        normal: {
                            borderColor: '#1F6AFB',
                            // 拐點的描邊顏色。[ default: '#000' ]
                            borderWidth: 3,
                            // 拐點的描邊寬度,默認不描邊。[ default: 0 ]
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: 'rgba(128, 128, 128, 0.1)' // 五點連接後形成的區域顏色: 透明色
                        }
                    }
                }]
            }]
        }

效果圖:

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章