在echarts中实现雷达图效果
1.效果
2.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#main {
/* width: 100%; */
width: 500px;
height: 800px;
margin: auto;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="main"></div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<script type="text/javascript">
var dataname = ['德', '智(一)', '智(二)', '体', '美', '劳']
var datamax = [20, 20, 20, 20, 20, 20]
var datavaule = [9, 16, 16, 15, 12, 8]
var datavaule1 = [6, 8, 10, 6, 5, 8]
var datavaule2 = [19, 19, 19, 19, 19, 19]
var indicator = []
for (var i = 0; i < dataname.length; i++) {
indicator.push({
name: dataname[i],
max: datamax[i]
})
}
console.log('indicator', indicator)
initChart()
function initChart() {
let myCharts = null
myCharts = echarts.init(document.getElementById('main'))
let option = {
tooltip: {
show: true,
trigger: 'item'
},
legend: {
data: ['当前分数', '均值', '满分'],
type: 'scroll',
orient: 'vertical',
icon: 'roundRect',
right: '20',
top: 'center',
itemGap: 30,
itemWidth: 16,
itemHeight: 16,
textStyle: {
fontSize: '15',
color: '#656565'
}
},
radar: {
center: ['50%', '50%'],
radius: '65%',
startAngle: 0,
splitNumber: 5,
splitArea: {
areaStyle: {
color: ['#FFFFFF', '#F5F9FF'].reverse()
}
},
axisLabel: {
show: false
// show: true
},
// 对角线之间的连线
axisLine: {
show: true,
lineStyle: {
color: 'green'
}
},
// 每一圈的分割线
splitLine: {
show: true,
lineStyle: {
color: 'red'
}
},
// 名称
name: {
formatter: '{value} hello',
textStyle: {
// color: '#656565' ,
color: '#fb3',
fontSize: 15
}
},
indicator: indicator
},
series: [
{
name: '当前分数',
type: 'radar',
symbol: 'none',
symbolSize: 6,
areaStyle: {
normal: {
color: '#80B2FF'
}
},
itemStyle: {
color: '#80B2FF'
},
lineStyle: {
normal: {
color: '#80B2FF',
width: 2
}
},
data: [datavaule] // 注意这个地方是二位数组
},
{
name: '均值',
type: 'radar',
symbol: 'none',
symbolSize: 6,
areaStyle: {
normal: {
color: 'rgba(103, 193, 57, 0.18)'
}
},
itemStyle: {
color: '#FF7A28'
},
lineStyle: {
normal: {
color: '#FF7A28',
width: 2
}
},
data: [datavaule1] // 注意这个地方是二维数组
},
{
name: '满分',
type: 'radar',
symbol: 'none',
symbolSize: 6,
areaStyle: {
normal: {
color: 'rgba(234, 164, 61, 0.18)'
}
},
itemStyle: {
color: '#0263FF'
},
lineStyle: {
normal: {
color: '#0263FF',
width: 2
}
},
data: [datavaule2] // 注意这个地方是二维数组
}
]
}
myCharts.clear()
myCharts.setOption(option)
window.addEventListener('resize', () => {
myCharts.resize()
})
}
</script>
</html>