echarts实现简单图表案例

最新推荐文章于 2025-03-26 15:27:05 发布

温L

最新推荐文章于 2025-03-26 15:27:05 发布

阅读量365

点赞数

文章标签： echarts 前端 html javascript

本文链接：https://blog.youkuaiyun.com/lwf0829/article/details/121711477

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#container{width: 800px;height: 600px;}
		</style>
	</head>
	<body>
		<div id="container"></div>
	</body>
	<!-- 引入echarts的js -->
	<script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	// 初始化echart实例并获取dom节点
		var echart=echarts.init(document.getElementById("container"));
		var option={
			// 设置标题
			title:{
				text:"前端大讲堂数据"
			},
			// 鼠标提示
			tooltip:{},
			// 设置图例
			legend:{data:["人数","人气","年龄分布"]},
			// 设置x轴的内容
			xAxis:{data:["12-1","12-2","12-3","12-4","12-5"]},
			yAxis:{},
			// 系列数据
			series:[
				// 名字，柱形，数据
				{name:"人数",type:"bar",data:[1000,800,500,300,500,600]},
				// 名字，线性，smooth:true是为了线更顺滑，数据
				{name:"人气",type:"line",smooth:true,data:[1000,800,500,300,500,600]},
				// 名字，二维饼图，radius:["20%","10%"]控制饼图的大小，
				// 一个值是实心的，两个值是空心的饼图，right，top改变位置，数据
				{name:"年龄分布",type:"pie",radius:["20%","10%"],right:"-50%",top:"-50%",
				data:[
					{name:"少年",value:20},
					{name:"青年",value:50},
					{name:"中年",value:30},
					{name:"老年",value:10}
					]}
				
			]
		};
		// 设置参数
		echart.setOption(option)
	</script>
</html>