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

風暴阿呆發表於2017-12-14
Echarts

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

ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖，用於統計的盒形圖，用於地理資料視覺化的地圖、熱力圖、線圖，用於關係資料視覺化的關係圖、treemap，多維資料視覺化的平行座標，還有用於 BI 的漏斗圖、儀表盤，並且支援圖與圖之間的混搭。
  • 在 body 中新增一個 div 標籤，為該 div 設定一個 id 名，並設定寬和高。
  • 引入 echarts.js 檔案

開始寫自己的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 已經為我們提供了很多的作品示例，平常使用的一些效果只需要引用某些示例，然後根據官方文件中的配置項來修改一些樣式即可達到自己想要的效果。

相關文章