echart的学习：1.雷达图在es5（不使用框架的原生情况下）下的使用

最新推荐文章于 2024-05-12 14:16:53 发布

mkmin

最新推荐文章于 2024-05-12 14:16:53 发布

阅读量527

点赞数 1

分类专栏：插件文章标签： echart

本文链接：https://blog.csdn.net/HUSHILIN001/article/details/87163595

版权

插件专栏收录该内容

13 篇文章 1 订阅

订阅专栏

这个系列的博客没什么大的用处，因为echart基本都有范例的了。我只是为了自己能更好的学习下这个插件，而写博客总结下经验

1.准备：

使用雷达图不能直接下载常用的echart.js，需要下载完整的echart.js

2.使用的代码：

1.title：标题的设置

2.legend：里程碑的设置

3.radar：雷达项的设置（使用的是雷达坐标系）

4.series：数据的设置（主要是type）

3.代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<div id="main" style="width: 600px;height: 600px;"></div>

	</body>
	<script type="text/javascript" src="js/echarts.common.min.js"></script>
	<script>
		var mychart = echarts.init(document.getElementById('main'));
		var option = {
			title: {
				text: "这个是测试",
				link: 'https://www.baidu.com',
				target: "blank",
				textAlign: 'left',

			},
			tooltip: {}, //提示层
			legend: {
				data: ['name1']
			},
			radar: {
				name: {
					textStyle: {
						color: '#fff', //字体颜色
						backgroundColor: '#999', //背景色
						borderRadius: 3, //圆角
						padding: [3, 5] //padding
					}
				},
				center: ['50%', '50%'],
				radius: '80%',
				startAngle: 270,
				indicator: [{
						name: '指标一',
						max: 600
					},
					{
						name: '指标二',
						max: 600
					},
					{
						name: '指标三',
						max: 600
					}
				],
			},
			series: [{
				name: '测试标题名字',
				type: 'radar',
				data: [{
					value: [400, 200, 20],
					name: "123",
				}]
			}]
		}
		mychart.setOption(option);
	</script>

</html>

19/2/13：

1.补充效果图

2.修改代码，添加提示层

参考资料：

1.echart配置项文档：https://echarts.baidu.com/option.html#title

2.echart的示例：https://echarts.baidu.com/examples

mkmin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echart的学习：1.雷达图在es5（不使用框架的原生情况下）下的使用

这个系列的博客没什么大的用处，因为echart基本都有范例的了。我只是为了自己能更好的学习下这个插件，而写博客总结下经验1.准备：使用雷达图不能直接下载常用的echart.js，需要下载完整的echart.js2.使用的代码： 1.title：标题的设置 2.legend：里程碑的设置 3.radar：雷达项的设置（使用的是雷达坐标系） 4...
复制链接

扫一扫