JavaScript实现大数据（条形统计图表）

最新推荐文章于 2022-12-20 15:23:11 发布

疑似忘川落九天

最新推荐文章于 2022-12-20 15:23:11 发布

阅读量2k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_47801382/article/details/121973691

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文展示了如何使用Apache ECharts库创建一个带有滚动条的数据缩放功能，用于显示分公司载客次数与比例的数据对比图表。通过详细的代码实例，读者可以了解如何配置x轴、y轴和数据系列来呈现清晰的可视化效果。

摘要由CSDN通过智能技术生成

链接：

Examples - Apache ECharts

设置下面滚动条的组件：dataZoom

Documentation - Apache ECharts

效果：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>载客比例与次数：分公司</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<script src="js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/echarts.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
			<div id="dsjtb" style="width: 500px; height: 500px;">
				
			</div>
		</body>
		//JS代码
		<script type="text/javascript">
			var myCharts = echarts.init(document.getElementById("dsjtb"));
			
			var option = {
				title:{
					text:"载客比例与次数：分公司"
				},
				toolpip:{
					trigger:"axis"
				},
				legend: {
				    
					center:"center"
				  },
				xAxis:{
					type:"category",
					data:["神州租车","神州租车","神州租车","神州租车","神州租车","新里程","新里程","新里程","新里程","新里程","浏阳金马","浏阳金马","浏阳金马","浏阳金马","浏阳金马","中创","中创","中创","中创","中创","湘图","湘图","湘图","湘图","湘图"],
					axisLabel: { interval: 4}
					
				},
				yAxis:{
					type:"value"
				},
				dataZoom: [
					{
					    top: "100%",
					    bottom: "0%"
					  },
				    {
				      type: 'slider',
				    },
				    {
				      type: 'inside',
				    },
				  ],
				series:[
					{
						name:"载客次数",
						type:"bar",
						data:[324,546,756,766,566,443,436,906,844,236,567,888,919,438,269,657,534,467,435,764]
					}
				]
			};
			myCharts.setOption(option);
		</script>
	</html>