eharts雷達圖相關設置

關於echarts的雷達圖比較詳細的參數說明

要實現的效果圖如下：

 

 

接下來主要關於下面的幾個參數進行設置
1. 雷達圖的圈數
2. 雷達圖每圈上面的數字
3. 雷達圖區域拐點的數值
4. 雷達圖拐點的樣式
5. 雷達圖每個區域的顏色設置
6. 雷達圖tooltip限制在圖表區域內
7. 鼠標可以移動到tooltip里，一般需要在tooltip中加入可操作元素時有用
8. 雷達圖背景顏色透明

 export const industryFactorOption = {
    title: {
        text: '雷達圖',
        textStyle: {
            color: 'rgba(221,221,221,1)', //標題顏色
            fontSize: 14,
            lineHeight: 20,
        },
        // 標題的位置，此時放在圖的底邊
        left: 'center',
        top: 'bottom',
    },
    // 圖表的位置
    grid: {
        position: 'center',
     },
     tooltip : {
     //雷達圖的tooltip不會超出div，也可以設置position屬性，position定位的tooltip 不會隨着鼠標移動而位置變化，不友好
        confine: true,
        enterable: true, //鼠標是否可以移動到tooltip區域內
     },
    radar: {
        shape: 'circle',
        splitNumber: 3, // 雷達圖圈數設置
        name: {
            textStyle: {
                color: '#838D9E',
            },
        },
        // 設置雷達圖中間射線的顏色
        axisLine: {
            lineStyle: {
                color: 'rgba(131,141,158,.1)',
                },
        },
        indicator: [{
            name: '通信', max: 30,
            //若將此屬性放在radar下，則每條indicator都會顯示圈上的數值，放在這兒，只在通信這條indicator上顯示
            axisLabel: {
                show: true,
                fontSize: 12,
                color: '#838D9E',
                showMaxLabel: false, //不顯示最大值，即外圈不顯示數字30
                showMinLabel: true, //顯示最小數字，即中心點顯示0
            },
        },
        { name: '零售', max: 30},
        { name: '電力', max: 30},
        { name: '交通', max: 30},
        { name: '食品', max: 30},
        { name: '建築', max: 30},
        { name: '銀行', max: 30},
        { name: '汽車', max: 30},
        { name: '電子工程', max: 30},
        ],
        //雷達圖背景的顏色，在這兒隨便設置了一個顏色，完全不透明度為0，就實現了透明背景
        splitArea : {
            show : false,
            areaStyle : {
                color: 'rgba(255,0,0,0)', // 圖表背景的顏色
            },
        },
        splitLine : {
            show : true,
            lineStyle : {
                width : 1,
                color : 'rgba(131,141,158,.1)', // 設置網格的顏色
            },
        },
    },
    series: [{
        name: '雷達圖', // tooltip中的標題
        type: 'radar', //表示是雷達圖
        symbol: 'circle', // 拐點的樣式，還可以取值'rect','angle'等
        symbolSize: 8, // 拐點的大小

        areaStyle: {
            normal: {
                width: 1,
                opacity: 0.2,
            },
        },
        data: [
            {
                value: [17, 24, 27, 29, 26, 16, 13, 17, 25],
                name: '2018-07',
                // 設置區域邊框和區域的顏色
                itemStyle: {
                    normal: {
                        color: 'rgba(255,225,0,.3)',
                        lineStyle: {
                            color: 'rgba(255,225,0,.3)',
                        },
                    },
                },
                //在拐點處顯示數值
                label: {
                    normal: {
                        show: true,
                        formatter: (params: any) => {
                            return params.value
                        },
                    },
                },
            },
            {
                value: [5, 20, 19, 11, 22, 17, 8, 19, 16],
                name: '',
                 itemStyle: {
                    normal: {
                        color: 'rgba(60,135,213,.3)',
                        lineStyle: {
                            width: 1,
                            color: 'rgba(60,135,213,.3)',
                        },
                    },
                },
            },
             {
                value: [7, 18, 19, 13, 22, 17, 8, 25, 9],
                name: '',
                itemStyle: {
                    normal: {
                        color: 'rgba(255,74,74,.3)',
                        lineStyle: {
                            width: 1,
                            color: 'rgba(255,74,74,.3)',
                        },
                    },
                },
            },
        ],
    }],
}

　　

還想實現鼠標移動到indicator上面，顯示這條軸上的數據，如下圖：見稍后文章

 

 

————————————————
版權聲明：本文為CSDN博主「畫一生情入顏容」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/csdn_zsdf/article/details/81366738