echarts實(shí)現(xiàn)雷達(dá)圖的詳細(xì)步驟

更新時(shí)間：2024年01月18日 11:24:58 作者：cc&

這篇文章主要給大家介紹了關(guān)于echarts實(shí)現(xiàn)雷達(dá)圖的詳細(xì)步驟,雷達(dá)圖(Radar?Chart)是一種信息豐富的可視化工具,其中多個(gè)變量（三個(gè)或更多）在二維平面上進(jìn)行比較,文中給出了完整的代碼示例,需要的朋友可以參考下

效果圖：

實(shí)現(xiàn)步驟：

* 尋找官方的類似示例，給予分析，并引入到HTML頁(yè)面中

* 按照需求來(lái)定制它

第一步：參考類似實(shí)例

(function() {
  // 1. 實(shí)例化對(duì)象
  var myChart = echarts.init(document.querySelector(".radar"));
  // 2.指定配置
  var dataBJ = [[55, 9, 56, 0.46, 18, 6, 1]];
  var lineStyle = {
    normal: {
      width: 1,
      opacity: 0.5
    }
  };
  var option = {
    backgroundColor: "#161627",
    radar: {
      indicator: [
        { name: "AQI", max: 300 },
        { name: "PM2.5", max: 250 },
        { name: "PM10", max: 300 },
        { name: "CO", max: 5 },
        { name: "NO2", max: 200 },
        { name: "SO2", max: 100 }
      ],
      shape: "circle",
      splitNumber: 5,
      name: {
        textStyle: {
          color: "rgb(238, 197, 102)"
        }
      },
      splitLine: {
        lineStyle: {
          color: [
            "rgba(238, 197, 102, 0.1)",
            "rgba(238, 197, 102, 0.2)",
            "rgba(238, 197, 102, 0.4)",
            "rgba(238, 197, 102, 0.6)",
            "rgba(238, 197, 102, 0.8)",
            "rgba(238, 197, 102, 1)"
          ].reverse()
        }
      },
      splitArea: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: "rgba(238, 197, 102, 0.5)"
        }
      }
    },
    series: [
      {
        name: "北京",
        type: "radar",
        lineStyle: lineStyle,
        data: dataBJ,
        symbol: "none",
        itemStyle: {
          color: "#F9713C"
        },
        areaStyle: {
          opacity: 0.1
        }
      }
    ]
  };
  // 3.把配置和數(shù)據(jù)給對(duì)象
  myChart.setOption(option);
})();

第二步：按照需求來(lái)定制它

需求1：去掉背景顏色，調(diào)整雷達(dá)圖大小 65%

radar:{
    center: ['50%', '50%'],
    // 外半徑占據(jù)容器大小
    radius: '65%',
}

需求2：指示器軸的分割段數(shù)為4條（4個(gè)圓圈）

radar:{
    center: ['50%', '50%'],
    // 外半徑占據(jù)容器大小
    radius: '65%',
    // 指示器軸的分割段數(shù)
    splitNumber: 4,
}

需求3：雷達(dá)圖分割線設(shè)為白色半透明 0.5

 // 坐標(biāo)軸在 grid 區(qū)域中的分隔線（圓圈）
   splitLine: {
        lineStyle: {
           color: 'rgba(255, 255, 255, 0.5)',
           // width: 2,
           // type: 'dashed'
           }
   },

需求4：雷達(dá)圖坐標(biāo)軸軸線相關(guān)設(shè)置(豎線) axisLine

// 坐標(biāo)軸軸線相關(guān)設(shè)置(豎線)axisLine（中心散發(fā)的內(nèi)六條線）
axisLine: {
  show: true,
  lineStyle: {
  color: 'rgba(255, 255, 255, 0.5)'
  // width: 1,
  // type: 'solid'
    }
},

需求5：修飾雷達(dá)圖文字顏色為 #4c9bfd

name: {
    // 修飾雷達(dá)圖文本顏色
     textStyle: {
       color: '#4c9bfd'
     }
},

需求6：修飾區(qū)域填充樣式 series 對(duì)象

區(qū)域填充的背景顏色設(shè)置為： rgba(238, 197, 102, 0.6)---數(shù)據(jù)圍成的圖形填充

 areaStyle: {
     color: 'rgba(238, 197, 102, 0.6)',
},

區(qū)域填充的線條顏色為白色----數(shù)據(jù)圍成的線條顏色填充

// 線條樣式
  lineStyle: {
         normal: {
              color: '#fff',
              // width: 1
         }
},

需求7：標(biāo)記的圖形(拐點(diǎn)）設(shè)置注意 series 里面設(shè)置

* 用圓點(diǎn)顯示，拐點(diǎn)的大小設(shè)置為 5
* 小圓點(diǎn)設(shè)置為白色
* 在小圓點(diǎn)上顯示相關(guān)數(shù)據(jù)，顏色設(shè)置為白色，10像素

// symbol 標(biāo)記的樣式(拐點(diǎn)），還可以取值'rect' 方塊 ,'arrow' 三角等
symbol: 'circle', 
// 拐點(diǎn)的大小  
symbolSize: 5, 
// 小圓點(diǎn)（拐點(diǎn)）設(shè)置為白色
itemStyle: {
       color: '#fff'
},
// 在圓點(diǎn)上顯示相關(guān)數(shù)據(jù)
label: {
     show: true,
     color: '#fff',
     fontSize: 10
},

需求8：鼠標(biāo)經(jīng)過(guò)顯示提示框組件

tooltip: {
    show: true,
    // 控制提示框組件的顯示位置
    position: ['60%', '10%'],
},

需求9：更換數(shù)據(jù)

 // 雷達(dá)圖的指示器 內(nèi)部填充數(shù)據(jù)
  indicator: [
        { name: '機(jī)場(chǎng)', max: 100 },
        { name: '商場(chǎng)', max: 100 },
        { name: '火車站', max: 100 },
        { name: '汽車站', max: 100 },
        { name: '地鐵', max: 100 }
 ],

data: [[90, 19, 56, 11, 34]],

html 整個(gè)代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div class="radar" style="width: 40%; height: 300px"></div>
    <script src="./js/echarts.js"></script>
    <script>
        // 銷售渠道模塊 雷達(dá)圖
        (function () {
            // 1. 實(shí)例化對(duì)象
            var myChart = echarts.init(document.querySelector(".radar"));
            // 2.指定配置
            var option = {
                backgroundColor: "#161627",
                tooltip: {
                    show: true,
                    // 控制提示框組件的顯示位置
                    position: ["60%", "10%"]
                },
                radar: {
                    indicator: [
                        { name: "機(jī)場(chǎng)", max: 100 },
                        { name: "商場(chǎng)", max: 100 },
                        { name: "火車站", max: 100 },
                        { name: "汽車站", max: 100 },
                        { name: "地鐵", max: 100 }
                    ],
                    // 修改雷達(dá)圖的大小
                    radius: "65%",
                    shape: "circle",
                    // 分割的圓圈個(gè)數(shù)
                    splitNumber: 4,
                    name: {
                        // 修飾雷達(dá)圖文字的顏色
                        textStyle: {
                            color: "#4c9bfd"
                        }
                    },
                    // 分割的圓圈線條的樣式
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255, 0.5)"
                        }
                    },
                    splitArea: {
                        show: false
                    },
                    // 坐標(biāo)軸的線修改為白色半透明
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255, 255, 255, 0.5)"
                        }
                    }
                },
                series: [
                    {
                        name: "北京",
                        type: "radar",
                        // 填充區(qū)域的線條顏色
                        lineStyle: {
                            normal: {
                                color: "#fff",
                                width: 1,
                                opacity: 0.5
                            }
                        },
                        data: [[90, 19, 56, 11, 34]],
                        // 設(shè)置圖形標(biāo)記 （拐點(diǎn)）
                        symbol: "circle",
                        // 這個(gè)是設(shè)置小圓點(diǎn)大小
                        symbolSize: 5,
                        // 設(shè)置小圓點(diǎn)顏色
                        itemStyle: {
                            color: "#fff"
                        },
                        // 讓小圓點(diǎn)顯示數(shù)據(jù)
                        label: {
                            show: true,
                            fontSize: 10
                        },
                        // 修飾我們區(qū)域填充的背景顏色
                        areaStyle: {
                            color: "rgba(238, 197, 102, 0.6)"
                        }
                    }
                ]
            };
            // 3.把配置和數(shù)據(jù)給對(duì)象
            myChart.setOption(option);
            // 當(dāng)我們?yōu)g覽器縮放的時(shí)候，圖表也等比例縮放
            window.addEventListener("resize", function () {
                // 讓我們的圖表調(diào)用 resize這個(gè)方法
                myChart.resize();
            });
        })();

    </script>
</body>

</html>