echarts自定义雷达图（radar）

 

先来个效果图

1、首先设置形状

 shape: "circle", // 支持 'polygon' 和 'circle' ,默认polygon

2、设置线条

splitLine: {//分隔线
                    show: true,
                    lineStyle: {
                        color: '#306eff'
                    }
                },
                splitArea: {//分割区域
                    show: false,
                },
                axisLine: {//雷达线
                    show: true,
                    lineStyle: {
                        color: '#306eff',
                        width: 2,
                    }
                }

3、设置文本标签，按照此种格式写即可，color不设置时，默认是白色

indicator: [
   { name: '销售（sales）', max: 6500},
   { name: '管理（Administration）', max: 16000, color: 'red'}, // 标签设置为红色
   { name: '信息技术（Information Techology）', max: 30000},
   { name: '客服（Customer Support）', max: 38000},
   { name: '研发（Development）', max: 52000},
   { name: '市场（Marketing）', max: 25000}
]

4、设置数据展示区域

itemStyle: {
    normal: {
        areaStyle: {
            type: 'default', //不设置时，为透明
            opacity: 0.4,
             },
        }
},

5、封装方法

需要传入两个参数，一个是dom元素的Id，还有一个是json数据数组，调用请往下看

/**
 * 雷达图
 * @param id  div的id
 * @param data json数据数组
 * */
CharacterTrait.prototype.loadRadar = function (id, data) {
    var indicator = []; // 标签
    var value = []; // 数值
    var max = 0; // 最大值
    $.each(data, function (index, ele) {
            if (ele.value > max) {
                max = parseInt(ele.value) + 200;
            }
        }
    );
    $.each(data, function (index, ele) {
        var indi = {text: ele.type, max: max, color: '#d9fdff'};
        indicator.push(indi);
        value.push(ele.value);
    });

    var myRadar = echarts.init(document.getElementById(id));//初始化图表
    var radarOption = {
        tooltip: {
            trigger: 'axis',
            confine: true, //触发时，内容包裹在图形内
        },
        color: ["#d9fdff"],
        radar: [
            {
                indicator: indicator,
                center: ['50%', '50%'],
                radius: '75%',
                nameGap: '10',//字与图形距离
                shape: "circle", // 支持 'polygon' 和 'circle' ,默认polygon
                splitLine: {//分隔线
                    show: true,
                    lineStyle: {
                        color: '#306eff'
                    }
                },
                splitArea: {//分割区域
                    show: false,
                },
                axisLine: {//雷达线
                    show: true,
                    lineStyle: {
                        color: '#306eff',
                        width: 2,
                    }
                }
            }
        ],
        series: [
            {
                type: 'radar',
                tooltip: {
                    trigger: 'item'
                },
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: 'default',
                            opacity: 0.4,
                        },
                    }
                },
                data: [
                    {
                        value: value,
                        name: '性格特征统计',
                    }
                ]
            }
        ]
    };
    myRadar.setOption(radarOption);
}

6、调用封装的方法

var data = [{"type": "正常", "value": "1274"},
                {"type": "忧郁型", "value": "928"},
                {"type": "反社会型","value": "92"},
                {"type": "偏执型","value": "121"},
                {"type": "强迫型","value": "619"},
                {"type": "表演型","value": "284"},
                {"type": "冲动型","value": "218"}];
    that.loadRadar("characterTraitRadar", data);

完美收官，希望能帮助到各位，若有不明白的地方，尽情留言，我将及时回复