ECharts雷達圖詳細配置說明

雷達圖表配置說明：

// 指定圖表的配置項和數據
var option = {
    backgroundColor: 'rgba(204,204,204,0.7 )',
    // 背景色，默認無背景    rgba(51,255,255,0.7)
    title: {
        text: '各教育階段男女人數統計',
        link: 'https://www.xxx.com',
        target: 'blank',
        top: '5%',
        left: '3%',
        textStyle: {
            color: '#fff',
            fontSize: 20,
        }
    },

    legend: { // 圖例組件
        show: true,
        icon: 'rect',
        // 圖例項的 icon。ECharts 提供的標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'也可以通過 'image://url' 設置為圖片，其中 url 為圖片的鏈接，或者 dataURI。可以通過 'path://' 將圖標設置為任意的矢量路徑。 
        top: '40%',
        // 圖例距離頂部邊距
        left: '15%',
        // 圖例距離左側邊距
        itemWidth: 10,
        // 圖例標記的圖形寬度。[ default: 25 ]
        itemHeight: 10,
        // 圖例標記的圖形高度。[ default: 14 ]
        itemGap: 30,
        // 圖例每項之間的間隔。[ default: 10 ]橫向布局時為水平間隔，縱向布局時為縱向間隔。
        orient: 'vertical',
        // 圖例列表的布局朝向,'horizontal'為橫向,''為縱向.
        textStyle: { // 圖例的公用文本樣式。
            fontSize: 15,
            color: '#fff'
        },
        data: [{ // 圖例的數據數組。數組項通常為一個字符串，每一項代表一個系列的 name（如果是餅圖，也可以是餅圖單個數據的 name）。圖例組件會自動根據對應系列的圖形標記（symbol）來繪制自己的顏色和標記，特殊字符串 ''（空字符串）或者 '\n'（換行字符串）用於圖例的換行。
            name: '男',
            // 圖例項的名稱，應等於某系列的name值（如果是餅圖，也可以是餅圖單個數據的 name）。 
            icon: 'rect',
            // 圖例項的 icon。
            textStyle: { // 圖例項的文本樣式。
                color: 'rgba(51,0,255,1)',
                fontWeight: 'bold' // 文字字體的粗細，可選'normal'，'bold'，'bolder'，'lighter'
            }
        },
        {
            name: '女',
            icon: 'rect',
            textStyle: {
                color: 'rgba(255,0,0,1)',
                fontWeight: 'bold' // 文字字體的粗細，可選'normal'，'bold'，'bolder'，'lighter'
            }
        }],
    },

    radar: [{ // 雷達圖坐標系組件，只適用於雷達圖。
        center: ['50%', '50%'],
        // 圓中心坐標，數組的第一項是橫坐標，第二項是縱坐標。[ default: ['50%', '50%'] ]
        radius: 160,
        // 圓的半徑，數組的第一項是內半徑，第二項是外半徑。
        startAngle: 90,
        // 坐標系起始角度，也就是第一個指示器軸的角度。[ default: 90 ]
        name: { // (圓外的標簽)雷達圖每個指示器名稱的配置項。
            formatter: '{value}',
            textStyle: {
                fontSize: 15,
                color: '#000'
            }
        },
        nameGap: 15,
        // 指示器名稱和指示器軸的距離。[ default: 15 ]
        splitNumber: 4,
        // (這里是圓的環數)指示器軸的分割段數。[ default: 5 ]
        shape: 'circle',
        // 雷達圖繪制類型，支持 'polygon'(多邊形) 和 'circle'(圓)。[ default: 'polygon' ]
        axisLine: { // (圓內的幾條直線)坐標軸軸線相關設置
            lineStyle: {
                color: '#fff',
                // 坐標軸線線的顏色。
                width: 1,
                // 坐標軸線線寬。
                type: 'solid',
                // 坐標軸線線的類型。
            }
        },
        splitLine: { // (這里是指所有圓環)坐標軸在 grid 區域中的分隔線。
            lineStyle: {
                color: '#fff',
                // 分隔線顏色
                width: 2,
                // 分隔線線寬
            }
        },
        splitArea: { // 坐標軸在 grid 區域中的分隔區域，默認不顯示。
            show: true,
            areaStyle: { // 分隔區域的樣式設置。
                color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'],
                // 分隔區域顏色。分隔區域會按數組中顏色的順序依次循環設置顏色。默認是一個深淺的間隔色。
            }
        },
        indicator: [{ // 雷達圖的指示器，用來指定雷達圖中的多個變量（維度）,跟data中 value 對應
            name: '高中',
            // 指示器名稱 
            max: 15000,
            // 指示器的最大值，可選，建議設置 
            //color: '#fff' // 標簽特定的顏色。
        },
        {
            name: '專科',
            max: 10000
        },
        {
            name: '本科',
            max: 8000
        },
        {
            name: '碩士',
            max: 2000
        },
        {
            name: '博士',
            max: 500
        }]
    }],
    series: [{
        name: '雷達圖',
        // 系列名稱,用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新數據和配置項時用於指定對應的系列。
        type: 'radar',
        // 系列類型: 雷達圖
        itemStyle: { // 折線拐點標志的樣式。
            normal: { // 普通狀態時的樣式
                lineStyle: {
                    width: 1
                },
                opacity: 0.2
            },
            emphasis: { // 高亮時的樣式
                lineStyle: {
                    width: 5
                },
                opacity: 1
            }
        },
        data: [{ // 雷達圖的數據是多變量（維度）的
            name: '女',
            // 數據項名稱
            value: [11035, 6013, 5067, 1520, 184],
            // 其中的value項數組是具體的數據，每個值跟 radar.indicator 一一對應。
            symbol: 'circle',
            // 單個數據標記的圖形。
            symbolSize: 5,
            // 單個數據標記的大小，可以設置成諸如 10 這樣單一的數字，也可以用數組分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
            label: { // 單個拐點文本的樣式設置 
                normal: {
                    show: true,
                    // 單個拐點文本的樣式設置。[ default: false ]
                    position: 'top',
                    // 標簽的位置。[ default: top ]
                    distance: 5,
                    // 距離圖形元素的距離。當 position 為字符描述值（如 'top'、'insideRight'）時候有效。[ default: 5 ]
                    color: 'rgba(255,0,0,1)',
                    // 文字的顏色。如果設置為 'auto'，則為視覺映射得到的顏色，如系列色。[ default: "#fff" ]
                    fontSize: 14,
                    // 文字的字體大小
                    formatter: function(params) {
                        return params.value;
                    }
                }
            },
            itemStyle: { // 單個拐點標志的樣式設置。
                normal: {
                    borderColor: 'rgba(255,0,0,1)',
                    // 拐點的描邊顏色。[ default: '#000' ]
                    borderWidth: 3,
                    // 拐點的描邊寬度，默認不描邊。[ default: 0 ]
                }
            },
            lineStyle: { // 單項線條樣式。
                normal: {
                    opacity: 0.5 // 圖形透明度
                }
            },
            areaStyle: { // 單項區域填充樣式
                normal: {
                    color: 'rgba(255,0,0,0.6)' // 填充的顏色。[ default: "#000" ]
                }
            }
        },
        {
            name: '男',
            value: [13408, 5065, 5947, 856, 302],
            symbol: 'circle',
            symbolSize: 5,
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    distance: 5,
                    color: 'rgba(51,0,255,1)',
                    fontSize: 14,
                    formatter: function(params) {
                        return params.value;
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(51,0,255,1)',
                    borderWidth: 3,
                }
            },
            lineStyle: {
                normal: {
                    opacity: 0.5
                }
            },
            areaStyle: {
                normal: {
                    color: 'rgba(51,0,255,0.5)'
                }
            }
        }]
    },
    ]
};