Echarts-雷达图（echarts版本不同配置也不同）

最新版本：官网例子https://www.echartsjs.com/examples/zh/editor.html?c=radar，indicator配置更简洁

option = {
    title: {
        text: '基础雷达图'
    },
    tooltip: {},
    legend: {
        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
    },
    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
           }
        },
        indicator: [
           { name: '销售（sales）', max: 6500},
           { name: '管理（Administration）', max: 16000},
           { name: '信息技术（Information Techology）', max: 30000},
           { name: '客服（Customer Support）', max: 38000},
           { name: '研发（Development）', max: 52000},
           { name: '市场（Marketing）', max: 25000}
        ]
    },
    series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        // areaStyle: {normal: {}},
        data : [
            {
                value : [4300, 10000, 28000, 35000, 50000, 19000],
                name : '预算分配（Allocated Budget）'
            },
             {
                value : [5000, 14000, 28000, 31000, 42000, 21000],
                name : '实际开销（Actual Spending）'
            }
        ]
    }]
};

老版本：用polar配置

function test() {
            let myChart = echarts.init(document.getElementById('levelImage'));
            myChart.setOption({
                title: { text:null }, // 隐藏图表标题
                legend: { enabled: false }, // 隐藏图例
                tooltip : {
                    trigger: 'axis'
                },
                calculable : true,
                polar : [
                    {
                        nameGap : 5, // 图中工艺等字距离图的距离
                        center:['50%','50%'], // 图的位置
                        name:{
                           show: true, // 是否显示工艺等文字
                           formatter: null, // 工艺等文字的显示形式
                           textStyle: {
                             color:'#a3a5b6' // 工艺等文字颜色
                           }
                         },
                        indicator : [
                            {text : '工艺', max  : 100},
                            {text : '设备', max  : 100},
                            {text : '安全', max  : 100},
                            {text : '工艺', max  : 100},
                            {text : '仪表', max  : 100}
                        ],
                        axisLine: {            // 坐标轴线
                            show: false        // 默认显示，属性show控制显示与否
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            show: false,
                            textStyle: {      
                                color: '#247bd7' // 坐标轴刻度文字的样式
                            }
                        },
                        splitArea : {
                            show : true,   
                            areaStyle : {
                                color: ["#2a4a93"]  // 图表背景网格的颜色
                            }
                        },
                        splitLine : {
                            show : true,
                            lineStyle : {
                                width : 1,
                                color : '#286fbb' // 图表背景网格线的颜色
                            }
                        }
                    }
                ],
                series : [
                    {
                        name: '完全实况球员数据',
                        type: 'radar',
                        symbol: "none", // 去掉图表中各个图区域的边框线拐点
                        itemStyle: {
                            normal: {
                                color : "rgba(0,0,0,0)", // 图表中各个图区域的边框线拐点颜色
                                lineStyle: {
                                    color:"white" // 图表中各个图区域的边框线颜色
                                },
                                areaStyle: {
                                    type: 'default'
                                }
                            }
                        },
                        data : [
                            {
                                value : [50, 42, 88, 60, 90],
                                itemStyle: {
                                    normal: {
                                        areaStyle: {
                                            type: 'default',
                                            opacity: 0.8, // 图表中各个图区域的透明度
                                            color: "#1686c2" // 图表中各个图区域的颜色
                                        }
                                    }
                                },
                                name : '重整'
                            },
                            {
                                value : [90, 32, 74, 20, 60],
                                itemStyle: {
                                    normal: {
                                        areaStyle: {
                                            type: 'default',
                                            /*opacity: 1,*/
                                            color: "#6eaf97" // 图表中各个图区域的颜色
                                        }
                                    }
                                },
                                name : '催化'
                            }
                        ]
                    }
                ]
            });
        }
        test();

 

来源：CSDN

作者：ZHOU_VIP

链接：https://blog.csdn.net/ZHOU_VIP/article/details/103786484