02-echarts雷达图

最新推荐文章于 2022-11-15 16:19:19 发布

ann0302

最新推荐文章于 2022-11-15 16:19:19 发布

阅读量194

点赞数

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/qq_40353662/article/details/119061690

版权

echarts 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

步骤1 ECharts 最基本的代码结构

<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
	var mCharts = echarts.init(document.querySelector("div"))
	var option = {}
	mCharts.setOption(option)
</script>
</body>
</html>

步骤2 定义各个维度的最大值

var dataMax = [
	{
		name: '易用性', max: 100
	},
	{
		name: '功能', max: 100
	},
	{
		name: '拍照', max: 100
	},
	{
		name: '跑分', max: 100
	},
	{
		name: '续航', max: 100
	}
]

步骤3 准备具体产品的数据

var hwScore = [80, 90, 80, 82, 90]
var zxScore = [70, 82, 75, 70, 78]

步骤4 在 series 下设置 type:radar

var option = {
	radar: {
		indicator: dataMax
	},
	series: [{
		type: 'radar',
		data: [{
			name: '华为手机1',
			value: hwScore
		},
		{
			name: '中兴手机1',
			value: zxScore
		}]
}]

在这里插入图片描述

雷达图的常见效果

显示数值 label

var option = {
	series: [{
		type: 'radar',
		label: {
			show: true
		},
		data: [{
			name: '华为手机1',
			value: hwScore
		},
		{
			name: '中兴手机1',
			value: zxScore
		}]
	}]
}

在这里插入图片描述
区域面积 areaStyle

var option = {
	series: [{
		type: 'radar',
		label: {
			show: true
		},
		areaStyle: {},
		data: [{
			name: '华为手机1',
			value: hwScore
		},
			{
			name: '中兴手机1',
			value: zxScore
			}]
	}]
}

在这里插入图片描述
绘制类型 shape
雷达图绘制类型，支持 ‘polygon’ 和 ‘circle’
‘polygon’ : 多边形
‘circle’ 圆形

var option = {
	radar: {
	indicator: dataMax,
	shape: 'circle'
	},
	series: [{
		type: 'radar',
		label: {
			show: true
		},
		data: [{
				name: '华为手机1',
				value: hwScore
			},
			{
				name: '中兴手机1',
				value: zxScore
			}]
	}]
}

在这里插入图片描述

ann0302

关注

0
点赞
踩
0

收藏

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

步骤1 ECharts 最基本的代码结构<!DOCTYPE html><html lang="en"><head><script src="js/echarts.min.js"></script></head><body><div style="width: 600px;height:400px"></div><script> var mCharts = echarts.
复制链接

扫一扫