ECharts雷达图

最新推荐文章于 2024-04-01 11:47:28 发布

SunACong

最新推荐文章于 2024-04-01 11:47:28 发布

阅读量470

点赞数 1

分类专栏： ECharts 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_44808710/article/details/124851810

版权

ECharts 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

雷达图

常用配置

分析多个维度的数据与标准数据的对比情况

常用配置

<!DOCTYPE html>
<html lang=''en'>
<head>
	<meta charset='UTF-8'>
	<meta name='viewport' content='width=device-width, initial-scale=1.0'>
	<meta http-equiv='X-UA-Compatible' content=''ie=edge'>
	<title>雷达图</title>
	<script src='js/lib/echarts.min.js'></script>
</head>
<body>
	<div style='width: 600px;height:600px'></div>
	<script>
		var mCharts = echarts.init(document.querySelector('div'))
		// 各个维度的最大值
		var dataMax = [
		  {
		    name: '易用性',
		    max: 100
		  },
		  {
		    name: '功能',
		    max: 100
		  },
		  {
		    name: '拍照',
		    max: 100
		  },
		  {
		    name: '跑分',
		    max: 100
		  },
		  {
		    name: '续航',
		    max: 100
		  }
		]
		var option = {
		   radar:{
			   //配置雷达图的最大值
			   indicator:dataMax,
			   //配置雷达图最外层的形状 polygon
			   shape:'circle'
		   },
		   series:[
			   {
				   //设置雷达图类型
				   type:'radar',
				   //雷达图的数值
				   label:{
					 show:true  
				   },
				   //每个雷达图形成阴影面积
				   areaStyle:{},
				   data:[
					   {
						  name:'华为手机',
						  value:[80,90,72,80,92]
					   },
					   {
						   name:'中兴手机',
						   value:[90,80,42,60,82]
					   }
				   ]
			   }
		   ]
		}
		mCharts.setOption(option)
	</script>
</body>
</html>

在这里插入图片描述

SunACong

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ECharts雷达图

雷达图常用配置分析多个维度的数据与标准数据的对比情况常用配置<!DOCTYPE html><html lang=''en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content=''ie=ed
复制链接

扫一扫