echarts實現(xiàn)雷達圖的詳細步驟
更新時間：2024年01月18日 11:24:58 作者：cc&
這篇文章主要給大家介紹了關于echarts實現(xiàn)雷達圖的詳細步驟,雷達圖(Radar?Chart)是一種信息豐富的可視化工具,其中多個變量（三個或更多）在二維平面上進行比較,文中給出了完整的代碼示例,需要的朋友可以參考下
效果圖：
實現(xiàn)步驟：
* 尋找官方的類似示例，給予分析，并引入到HTML頁面中
* 按照需求來定制它
第一步： 參考類似實例
(function() {
// 1. 實例化對象
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ù)據給對象
myChart.setOption(option);
})();第二步：按照需求來定制它
- 需求1： 去掉背景顏色，調整雷達圖大小 65%
radar:{
center: ['50%', '50%'],
// 外半徑占據容器大小
radius: '65%',
} - 需求2： 指示器軸的分割段數(shù)為4條（4個圓圈）
radar:{
center: ['50%', '50%'],
// 外半徑占據容器大小
radius: '65%',
// 指示器軸的分割段數(shù)
splitNumber: 4,
} - 需求3： 雷達圖分割線設為白色半透明 0.5
// 坐標軸在 grid 區(qū)域中的分隔線（圓圈）
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.5)',
// width: 2,
// type: 'dashed'
}
},- 需求4： 雷達圖 坐標軸軸線相關設置(豎線) axisLine
// 坐標軸軸線相關設置(豎線)axisLine（中心散發(fā)的內六條線）
axisLine: {
show: true,
lineStyle: {
color: 'rgba(255, 255, 255, 0.5)'
// width: 1,
// type: 'solid'
}
},- 需求5： 修飾雷達圖文字顏色為 #4c9bfd
name: {
// 修飾雷達圖文本顏色
textStyle: {
color: '#4c9bfd'
}
},- 需求6： 修飾 區(qū)域填充樣式 series 對象
區(qū)域填充的背景顏色設置為： rgba(238, 197, 102, 0.6)---數(shù)據圍成的圖形填充
areaStyle: {
color: 'rgba(238, 197, 102, 0.6)',
},區(qū)域填充的線條顏色為白色----數(shù)據圍成的線條顏色填充
// 線條樣式
lineStyle: {
normal: {
color: '#fff',
// width: 1
}
},- 需求7： 標記的圖形(拐點）設置 注意 series 里面設置
* 用圓點顯示， 拐點的大小設置為 5
* 小圓點設置為白色
* 在小圓點上顯示相關數(shù)據，顏色設置為白色，10像素
// symbol 標記的樣式(拐點），還可以取值'rect' 方塊 ,'arrow' 三角等
symbol: 'circle',
// 拐點的大小
symbolSize: 5,
// 小圓點（拐點）設置為白色
itemStyle: {
color: '#fff'
},
// 在圓點上顯示相關數(shù)據
label: {
show: true,
color: '#fff',
fontSize: 10
}, - 需求8： 鼠標經過顯示提示框組件
tooltip: {
show: true,
// 控制提示框組件的顯示位置
position: ['60%', '10%'],
},- 需求9： 更換數(shù)據
// 雷達圖的指示器 內部填充數(shù)據
indicator: [
{ name: '機場', max: 100 },
{ name: '商場', max: 100 },
{ name: '火車站', max: 100 },
{ name: '汽車站', max: 100 },
{ name: '地鐵', max: 100 }
],data: [[90, 19, 56, 11, 34]],
html 整個代碼
<!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>
// 銷售渠道模塊 雷達圖
(function () {
// 1. 實例化對象
var myChart = echarts.init(document.querySelector(".radar"));
// 2.指定配置
var option = {
backgroundColor: "#161627",
tooltip: {
show: true,
// 控制提示框組件的顯示位置
position: ["60%", "10%"]
},
radar: {
indicator: [
{ name: "機場", max: 100 },
{ name: "商場", max: 100 },
{ name: "火車站", max: 100 },
{ name: "汽車站", max: 100 },
{ name: "地鐵", max: 100 }
],
// 修改雷達圖的大小
radius: "65%",
shape: "circle",
// 分割的圓圈個數(shù)
splitNumber: 4,
name: {
// 修飾雷達圖文字的顏色
textStyle: {
color: "#4c9bfd"
}
},
// 分割的圓圈線條的樣式
splitLine: {
lineStyle: {
color: "rgba(255,255,255, 0.5)"
}
},
splitArea: {
show: false
},
// 坐標軸的線修改為白色半透明
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]],
// 設置圖形標記 （拐點）
symbol: "circle",
// 這個是設置小圓點大小
symbolSize: 5,
// 設置小圓點顏色
itemStyle: {
color: "#fff"
},
// 讓小圓點顯示數(shù)據
label: {
show: true,
fontSize: 10
},
// 修飾我們區(qū)域填充的背景顏色
areaStyle: {
color: "rgba(238, 197, 102, 0.6)"
}
}
]
};
// 3.把配置和數(shù)據給對象
myChart.setOption(option);
// 當我們?yōu)g覽器縮放的時候，圖表也等比例縮放
window.addEventListener("resize", function () {
// 讓我們的圖表調用 resize這個方法
myChart.resize();
});
})();
</script>
</body>
</html>總結
到此這篇關于echarts實現(xiàn)雷達圖的文章就介紹到這了,更多相關echarts雷達圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JS實現(xiàn)簡單的選擇題測評系統(tǒng)代碼思路詳解(demo)
本文給大家分享js實現(xiàn)簡單的選擇題測評系統(tǒng)實例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
這篇文章主要介紹了js事件循環(huán)機制，并通過實例分析了用法和技巧，一起學習分享下。2017-12-12
下面小編就為大家?guī)硪黄狫S三目運算(三元運算)方法詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了JavaScript編寫的網頁小游戲，附上全部代碼供大家查看，實現(xiàn)了網頁的小游戲頁面，需要的朋友可以參考下2017-08-08
Google 二維條碼 API 整理，需要的朋友可以參考下。2010-11-11
javascript md5加密代碼，和asp、php的加密有一定的區(qū)別2008-09-09
有時編寫 Web 應用的代碼會感覺充滿魔力，因為我們只是寫了一系列字符，就能在瀏覽器里看到效果了。但是理解魔法背后的技術，可以幫助你更好地提高編程技巧2015-12-12
Layui數(shù)據表格 前后端json數(shù)據接收的方法
今天小編就為大家分享一篇Layui數(shù)據表格 前后端json數(shù)據接收的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要介紹了JS煙花背景效果實現(xiàn)方法,實例分析了javascript操作dom元素實現(xiàn)煙花特效的技巧,需要的朋友可以參考下2015-03-03
echarts實現(xiàn)平面的柱狀圖很順利,但是用戶為了美觀立體感,用到圓柱體圖,下面這篇文章主要給大家介紹了關于ECharts繪制立體柱狀圖(圓柱體)的相關資料,需要的朋友可以參考下2023-11-11