<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var option;
option = {
title: {
text: '自定义雷达图'
},
legend: {
data: ['图一', '图二', '张三', '李四']
},
radar: [{
indicator: [{
text: '指标一'
},
{
text: '指标二'
},
{
text: '指标三'
},
{
text: '指标四'
},
{
text: '指标五'
}
],
center: ['25%', '50%'],
radius: 120,
startAngle: 90,
splitNumber: 4,
shape: 'circle',
name: {
formatter: '【{value}】',
textStyle: {
color: '#72ACD1'
}
},
splitArea: {
areaStyle: {
color: ['rgba(114, 172, 209, 0.2)',
'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'
],
shadowColor: 'rgba(0, 0, 0, 0.3)',
shadowBlur: 10
}
},
axisLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.5)'
}
},
splitLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.5)'
}
}
},
{
indicator: [{
text: '语文',
max: 150
},
{
text: '数学',
max: 150
},
{
text: '英语',
max: 150
},
{
text: '物理',
max: 120
},
{
text: '化学',
max: 108
},
{
text: '生物',
max: 72
}
],
center: ['75%', '50%'],
radius: 120
}
],
series: [{
name: '雷达图',
type: 'radar',
itemStyle: {
emphasis: {
// color: 各异,
lineStyle: {
width: 4
}
}
},
data: [{
value: [100, 8, 0.40, -80, 2000],
name: '图一',
symbol: 'rect',
symbolSize: 5,
lineStyle: {
normal: {
type: 'dashed'
}
}
},
{
value: [60, 5, 0.30, -100, 1500],
name: '图二',
areaStyle: {
normal: {
color: 'rgba(255, 255, 255, 0.5)'
}
}
}
]
},
{
name: '成绩单',
type: 'radar',
radarIndex: 1,
data: [{
value: [120, 118, 130, 100, 99, 70],
name: '张三',
label: {
normal: {
show: true,
formatter: function(params) {
return params.value;
}
}
}
},
{
value: [90, 113, 140, 30, 70, 60],
name: '李四',
areaStyle: {
normal: {
opacity: 0.9,
color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [{
color: '#B8D3E4',
offset: 0
},
{
color: '#72ACD1',
offset: 1
}
])
}
}
}
]
}
]
}
myChart.setOption(option);
</script>
</body>
</html>
