Echarts 五种基本图案绘制（柱、折、散点、饼、雷达）

最新推荐文章于 2025-05-27 19:20:29 发布

小Chou熊

最新推荐文章于 2025-05-27 19:20:29 发布

阅读量705

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： Echarts

本文链接：https://blog.youkuaiyun.com/weixin_44964753/article/details/103019083

HTML 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了使用Echarts绘制五种基本图表的方法，包括柱状图、折线图、散点图、饼图和雷达图。通过实际代码示例，读者可以学习如何设置图表样式、数据系列和交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Echarts 五种基本图案绘制（柱、折、散点、饼、雷达）

哔哩哔哩视频详解：https://www.bilibili.com/video/av75379387

<!DOCTYPE html>
<html>
<head>
	<title>视频录制</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="echarts.min.js"></script>
	<style type="text/css">
		body{
			border: 0px;
			padding: 0px;
			margin: 0px;
		}
	</style>
	<script type="text/javascript">
		function radar(main,nam,dat){
			echart = echarts.init(document.getElementById(main));
			option = {
				grid:{
					containLabel:true,
					top:"10%",
					left:'3%',
					right:'3%',
					bottom:'3%'
				},
				title:{
					text:'雷达图'
				},
				tooltip:{
					trigger:'item',
				},
				radar:{
					indicator:[
						{name:'a',max:50},
						{name:'b',max:50},
						{name:'c',max:50},
						{name:'d',max:50},
						{name:'e',max:50},
					]
				},
				series:{
					type:'radar',
					name:nam,
					data:dat
				}
			};
			echart.setOption(option);
		}
	</script>
</head>
<body>
	<div id="main_1" style="width: 100%;height: 300px;position: absolute;top: 0px;"></div>
	<script type="text/javascript">
		echart = echarts.init(document.getElementById('main_1'));
		option = {
			grid:{
				containLabel:true,
				top:"10%",
				left:'3%',
				right:'3%',
				bottom:'3%'
			},
			title:{
				text:'柱状图'
			},
			legend:{
				data:['AA','BB','CC']
			},
			tooltip:{
				trigger:'axis',
				axisPointer:{
					type:'shadow'
				}
			},
			xAxis:{
				type:'category',
				data:[1,2,3,4,5,6,7]
			},
			yAxis:{
				type:'value'
			},
			series:[{
				name:'AA',
				type:'bar',
				data:[234,432,534,234,543,645,234],
				stack:'zong'
			},{
				name:'BB',
				type:'bar',
				data:[234,543,645,234,234,432,534],
				stack:'zong'
			},{
				name:'CC',
				type:'bar',
				data:[534,234,543,645,234,432,234]
			}]
		};
		echart.setOption(option);
	</script>
	<div id="main_2" style="width: 100%;height: 300px;position: absolute;top: 300px;"></div>
	<script type="text/javascript">
		echart = echarts.init(document.getElementById('main_2'));
		option = {
			grid:{
				containLabel:true,
				top:"10%",
				left:'3%',
				right:'3%',
				bottom:'3%'
			},
			title:{
				text:'折线图'
			},
			legend:{
				data:['AA','BB','CC']
			},
			tooltip:{
				trigger:'axis',
				axisPointer:{
					type:'cross'
				}
			},
			xAxis:{
				type:'category',
				data:[1,2,3,4,5,6,7],
				boundaryGap:false
			},
			yAxis:{
				type:'value'
			},
			series:[{
				name:'AA',
				type:'line',
				data:[234,432,534,234,543,645,234],
				smooth:true
			},{
				name:'BB',
				type:'line',
				data:[234,543,645,234,234,432,534]
			},{
				name:'CC',
				type:'line',
				data:[534,234,543,645,234,432,234]
			}]
		};
		echart.setOption(option);
	</script>
	<div id="main_3" style="width: 100%;height: 300px;position: absolute;top: 600px;"></div>
	<script type="text/javascript">
		var data = [
			[[234,534,54,'a'],[432,543,12,'a'],[456,234,34,'a']],
			[[645,234,34,'b'],[345,564,56,'b'],[543,786,34,'b']],
			[[234,456,65,'c'],[567,678,54,'c'],[234,345,32,'c']],
		];
		echart = echarts.init(document.getElementById('main_3'));
		option = {
			grid:{
				containLabel:true,
				top:"10%",
				left:'3%',
				right:'3%',
				bottom:'3%'
			},
			title:{
				text:'散点图'
			},
			legend:{
				data:['AA','BB','CC']
			},
			tooltip:{
				trigger:'item'
			},
			xAxis:{
				scale:true
			},
			yAxis:{
				scale:true
			},
			series:[{
				type:'scatter',
				name:'AA',
				data:data[0],
				symbolSize:function(data){
					return data[2];
				},
				label:{
					emphasis:{
						show:true,
						position:'top',
						formatter:function(param){
							return param.data[3];
						}
					}
				}
			},{
				type:'scatter',
				name:'BB',
				data:data[1],
				symbolSize:function(data){
					return data[2];
				},
				label:{
					emphasis:{
						show:true,
						position:'top',
						formatter:function(param){
							return param.data[3];
						}
					}
				}
			},{
				type:'scatter',
				name:'CC',
				data:data[2],
				symbolSize:function(data){
					return data[2];
				},
				label:{
					emphasis:{
						show:true,
						position:'top',
						formatter:function(param){
							return param.data[3];
						}
					}
				}
			}]
		};
		echart.setOption(option);
	</script>
	<div id="main_4" style="width: 100%;height: 300px;position: absolute;top: 900px;"></div>
	<script type="text/javascript">
		echart = echarts.init(document.getElementById('main_4'));
		option = {
			grid:{
				containLabel:true,
				top:"10%",
				left:'3%',
				right:'3%',
				bottom:'3%'
			},
			title:{
				text:'饼图'
			},
			legend:{
				data:['AA','BB','CC'],
				selectedMode:'single'
			},
			tooltip:{
				trigger:'item',
				formatter:'{a}{b}</br>{c}({d}%)'
			},
			series:[{
				type:'pie',
				name:'AA',
				data:[
					{name:'a',value:54},
					{name:'b',value:45},
					{name:'c',value:12},
					{name:'d',value:32},
					{name:'e',value:43},
				]
			},{
				type:'pie',
				name:'BB',
				data:[
					{name:'a',value:12},
					{name:'b',value:45},
					{name:'c',value:12},
					{name:'d',value:32},
					{name:'e',value:43},
				]
			},{
				type:'pie',
				name:'CC',
				data:[
					{name:'a',value:32},
					{name:'b',value:45},
					{name:'c',value:12},
					{name:'d',value:32},
					{name:'e',value:43},
				]
			}]
		};
		echart.setOption(option);
	</script>
	<div id="main_5" style="width: 50%;height: 300px;position: absolute;top: 1200px;"></div>
	<script type="text/javascript">
		radar('main_5','AA',[[23,43,12,32,45]]);
	</script>
	<div id="main_6" style="width: 50%;height: 300px;position: absolute;top: 1200px;left: 50%;"></div>
	<script type="text/javascript">
		radar('main_6','BB',[[12,32,23,43,45]]);
	</script>
</body>
</html>