ECharts 英雄聯盟能力分析雷達圖及支付寶信用評分雷達圖

ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理數據可視化的地圖、熱力圖、線圖，用於關系數據可視化的關系圖、treemap，多維數據可視化的平行坐標，還有用於 BI 的漏斗圖、儀表盤，並且支持圖與圖之間的混搭。

• 在 body 中添加一個 div 標簽，為該 div 設置一個 id 名，並設置寬和高。
• 引入 echarts.js 文件

 

//英雄聯盟能力分析雷達圖：
var myChartLol = echarts.init(document.getElementById("lol"));
var optionLol = {
    radar:[{
        indicator:[
            {text: "擊殺", max: 200},
            {text: "金錢", max: 200},
            {text: "防御", max: 200},
            {text: "魔法", max: 200},
            {text: "物理", max: 200},
            {text: "助攻", max: 200},
            {text: "生存", max: 200}
        ],
        radius: 100,
        shape: "rect",
        splitNumber: 4,
        //文字顏色
        name:{
            textStyle:{color: "#000", fontFamily: '行楷', fontSize: 8}
        },
        splitLine: {
            lineStyle: {
                color: [
                    '#95dde2','#5cc1c7','#2d8d93','#abdada'
                ].reverse()
            }
        },
        axisLine: {
            lineStyle: {
                color: '#abdada'
            }
        },
        splitArea: {
            areaStyle: {
                color: [
                    '#2d8d93','#5cc1c7','#95dde2','#d5f0f2'
                ]
            }
        }
    }],
    series: [
        {
            type: 'radar',
            data: [
                {
                    value: [130,100,160,199,80,190,180],
                    symbolSize: 0,
                    lineStyle: {
                        normal: {
                            type: 'solid',
                            color: '#ee6049',
                            width: 2
                        }
                    }
                }
            ]
        }
    ]};

myChartLol.setOption(optionLol);

//支付寶信用評分雷達圖：
var Price = echarts.init(document.getElementById("price"));
var optionPrice = {
    backgroundColor: 'rgba(27,181,226,.7)',
    radar: {
        splitNumber: 1,
        radius: "55%",
        //字體顏色
        name: {
            textStyle: {color: '#fff'}
        },
        //斜角分割線顏色
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,.2)'
            }
        },
        //雷達圖中的背景色透明度
        splitArea: {
            areaStyle: {
                opacity: 0
            }
        },
        //最外層邊框顏色
        splitLine: {
            lineStyle: {
                width: 1,
                color: 'rgba(255,255,255,.5)'
            }
        },
        indicator: [
            {text: '身份特質', max: 50},
            {text: '行為偏好', max: 50},
            {text: '人脈關系', max: 50},
            {text: '信用歷史', max: 50},
            {text: '履約能力', max: 50}
        ]},

    series: [
        {
            type: 'radar',
            symbolSize: 0,
            //填充區域顏色
            areaStyle: {
                normal: {
                    color: 'rgba(255,255,255,.3)'
                }
            },
            data: [{
                value: [48,44,45,46,46],
                //數據邊框樣式
                lineStyle: {
                    normal: {
                        width: 1,
                        color: 'rgba(82,206,228,1)'
                    }
                }
            }]
        }
    ]
};
Price.setOption(optionPrice);

ECharts 已經為我們提供了很多的作品示例，平常使用的一些效果只需要引用某些示例，然后根據官方文檔中的配置項來修改一些樣式即可達到自己想要的效果。