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);

完美收官，希望能幫助到各位，若有不明白的地方，盡情留言，我將及時回覆