web数据可视化(Echarts版)4-13多雷达图(代码仅供参考)

白日梦想家☜

已于 2023-05-22 15:29:42 修改

阅读量469

点赞数

分类专栏： HTML 文章标签： echarts 前端信息可视化

于 2023-05-20 22:51:41 首次发布

本文链接：https://blog.csdn.net/m0_63471474/article/details/130786958

版权

HTML 专栏收录该内容

40 篇文章 12 订阅

订阅专栏

该文章展示了一段HTML代码，用于使用echarts.js库创建一个多雷达图的示例。雷达图包含多个指标，如品牌、内容、可用性等，适用于对比不同项目或数据系列的表现。示例中包括了不同雷达图的配置，如颜色、形状和数据值。

摘要由CSDN通过智能技术生成

echarts.js文件下载地址:Apache ECharts

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="echarts.js">
		</script>
		</head>
		<body>
			<div id="main" style="width:700px;height:700px"></div>
			<script type="text/javascript">
				var myChart = echarts.init(document.getElementById("main"));
				var option ={
			color:["red",'green','blue','#660099','#FA8072','grey'],
			backgroundColor:'rgba(128,128,128,0.1)',
			title:{
				text:'多雷达图',top:15,
				textStyle:{color:'green'},left:240
			},
			tooltip:{trigger:'axis'},
			legend:{top:560,left:140,data:['某软件','小米','苹果','降水量','蒸发量']},
			radar:[
				{
					nameGap:3,shape:'polygon',
					name:{
						textStyle:{
							fontSize:12,color:'#fff',backgroundColor:'green',
						    borderRadius:3,padding:[2,2]
					}
				},
				indicator:[
					{text:'品牌',max:100},{text:'内容',max:100},
					{text:'可用性',max:100},{text:'功能',max:100}
				],
				center:['25%','30%'],radius:80
				},
				{
					nameGap:3,shape:'polygon',
					name:{
						textStyle:{
							fontSize:12,color:'#fff',backgroundColor:'blue',
							borderRadius:3,padding:[2,2]
						}
					},
					indicator:[{text:'外观',max:100},
					{text:'拍照',max:100},{text:'系统',max:100},
					{text:'性能',max:100},{text:'屏幕',max:100}],
					center:['60%','30%'],radius:80
				},
				{
					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:['41%','67%'],radius:80,
				}
			],
			series:[
				{
					type:'radar',tooltip:{trigger:'item'},
					itemStyle:{normal:{areaStyle:{type:'default'}}},
					data:[{value:[65,72,88,80],name:'某软件'}]
				},
				{
					type:'radar',radarIndex:1,
					tooltip:{trigger:'item'},
					data:[
						{value:[85,90,90,95,95],name:'小米'},
						{value:[85,90,90,95,95],name:'苹果'}]
				},
				{
					type:'radar',radarIndex:2,
					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>