<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Echarts图表</title>
<!-- 引入echarts.min.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
option = {
color: ['#f1ff00', '#00c1ff', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074','#546570', '#c4ccd3'],
backgroundColor: 'rgba(1,202,217,.2)',
grid: {
left: 20,
right: 20,
top: 30,
bottom: 30
},
//雷达坐标系
radar: {
name: {
textStyle: {
fontSize: 10,
color: 'rgba(255,255,255,.8)'
}
},
splitLine: {
lineStyle: {
color: [
'rgba(1,202,217,.01)', 'rgba(1,202,217,.01)'
].reverse()
}
},
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(1,202,217,.7)'
}
},
//雷达图的指示器,用来指定雷达图中的多个变量(维度)
indicator: [{
name: '红色警情',
max: 6500
},
{
name: '橙色警情',
max: 16000
},
{
name: '黄色警情',
max: 30000
},
{
name: '绿色警情',
max: 44000
}
]
},
series: [{
name: '',
// 类型:雷达图
type: 'radar',
radius: [5, 100],
center: ['50%', '50%'],
data: [{
value: [4300, 10000, 28000, 19000],
name: ''
},
{
value: [5000, 14000, 22000, 41000],
name: ''
}
]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
Echarts图表之雷达图(一)
于 2022-01-18 09:57:53 首次发布