标签：indicator name max value 实训 var 雷达 100
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script> <!-- 导入 ECharts 库 -->
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 400px"></div> <!-- 创建一个具有指定宽高的 div，用于展示图表 -->
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main")); <!-- 初始化 ECharts 实例，绑定到指定的 DOM 节点上 -->
//指定图表的配置项和数据
var option = {
backgroundColor:'rgba(0,0,0,0.2)', <!-- 设置图表背景色 -->
radar:[{ <!-- 雷达图配置 -->
nameGap:3, <!-- 名称和指示器之间的距离 -->
shape:'polygon', <!-- 雷达图形状 -->
name:{ <!-- 指示器名称配置 -->
textStyle:{ <!-- 文字样式配置 -->
fontSize:17, <!-- 字体大小 -->
color:'black', <!-- 字体颜色 -->
backgroundColor:'green', <!-- 背景颜色 -->
borderRadius:3, <!-- 边框圆角 -->
padding:[5,5] <!-- 内边距 -->
}
},
indicator: [ <!-- 指示器配置 -->
{ name: '外观', max: 100 }, <!-- 指示器名称及最大值 -->
{ name: '拍照', max: 100 },
{ name: '系统', max: 100 },
{ name: '性能', max: 100 },
{ name: '屏幕', max: 100 }
],
center:['75%','50%'], <!-- 雷达图中心位置 -->
radius:90 <!-- 雷达图半径 -->
},
{
nameGap:3,
shape:'polygon',
name:{
textStyle:{fontSize:12,
color:'red',
backgroundColor:'lightblue',
borderRadius:3,
padding:[2,2]}
},
indicator:(function(){ <!-- 动态生成指示器配置 -->
var res=[];
for(var i=1;i<=12;i++){
res.push({text:i+'月',
max:100});}
return res;
})(),
center:['25%','50%'],
radius:90
}
],
series: [ <!-- 系列数据配置 -->
{
type: 'radar',
radarIndex:0, <!-- 指定使用的雷达图配置索引 -->
tooltip:{trigger:'item'}, <!-- 鼠标悬停提示配置 -->
data: [ <!-- 数据项配置 -->
{
value: [80, 70, 85, 90, 75], // 对应 indicator 中的维度
name: '小米' <!-- 数据项名称 -->
},
{
value: [95,80,95,90,93], // 对应 indicator 中的维度
name: '苹果'
},
]
},
{
type: 'radar',
radarIndex:1, <!-- 指定使用的雷达图配置索引 -->
tooltip:{trigger:'item'}, <!-- 鼠标悬停提示配置 -->
itemStyle:{ normal:{ areaStyle: { type:'default' }}}, <!-- 图形样式配置 -->
data: [ <!-- 数据项配置 -->
{
name:'降水量',value:[5,6,9,56,69,73,77,88,50,22,7,5] <!-- 数据项名称及值 -->
},
{
name:'蒸发量',value:[3,5,8,34,45,77,68,65,36,23,7,4]
},
]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option); <!-- 将配置项和数据设置给图表实例，显示图表 -->
</script>
</body>
</html>
标签：indicator,
name,
max,
value,
实训,
var,
雷达,
100
From： https://blog.csdn.net/h_adint/article/details/137270108