流出交通工具洞察表

梦兮呀

于 2024-01-02 19:47:35 发布

阅读量353

点赞数 9

文章标签： echarts

本文链接：https://blog.csdn.net/isluya/article/details/135348416

版权

通过堆叠图直观的展现广东省各城市乘坐不同交通工具的比例

数据源：lines.json

要求：

图表标题：流出人群交通工具使用人数图表，副标题“模拟数据”
增加提示tooltip 和图例
x轴：广东省各城市
y轴：名称“百分比”，添加分隔线

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>流出交通工具洞察表</title>
		<script src ="js/echarts.min.js" type="text/javascript" charset="UTF-8"></script>
		<script src ="js/jquery-1.11.2.min.js" type = "text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="main" style="width: 800px;height: 600px;"></div>
		<script type="text/javascript">
			var myChart =echarts.init(document.getElementById("main"));
			
			var option ={
				backgroundColor: "#6a7985",
				tooltip: {
				     trigger: 'axis',
				        axisPointer: {
				          type: 'shadow'
				        }
				  },
				
				legend: {},
				
				grid: {
				    left: '3%',
				    right: '4%',
				    bottom: '3%',
				    containLabel: true
				  },
				// grid:{
				// 	color:""
				// },
				xAxis:{
					//type:'time',
					 name:"广东省各城市",
					 type: 'category',
					 data: ["深圳","东莞","广州","佛山","中山","惠州","汕头","江门","珠海","揭阳","潮州","清远","韶关","云浮","汕尾","肇庆","河源","梅州","湛江","茂名","阳江"],
			
					axisLine: {
					       show: true,
					       lineStyle: {
					         color: "rgba(0, 0, 0, 1.0)",
					       }
					     },
					nameTextStyle:{
						color:"rgba(236, 248, 73, 1)"
					},
					axisLabel:{
						color:"rgba(110, 240, 255, 0.57)"
					},
					minorTick:{
						lineStyle:{
							color:"rgba(46, 96, 116, 1)"
						}
					}
					 
				},  
				
				yAxis:{
					name:"百分比",
					type: 'value',
					axisLine: {
					       show: true,
					       lineStyle: {
					         color: "rgba(0, 0, 0, 1.0)",
					       }
					     },
					nameTextStyle:{
						color:"rgba(236, 248, 73, 1)"
					},
					axisLabel:{
						color:"rgba(110, 240, 255, 0.57)"
					}
			},
			
			series:[
				{
					
					name: '火车',
					type: 'bar',
					//数据堆叠
					stack:'total',
					label:{
							show:true,
						},
					emphasis: {
					focus: 'series'
					  },
					  emphasis: {
					         focus: 'series'
					       },
						   data:[39,39,29,29,31,31,30,30,31,25,32,29,33,29,32,26,30,32,31,33,34]
					    
					     },
					     {
					       name: '小汽车',
					       type: 'bar',
					       stack: 'total',
					       label: {
					       
					         	show:true,
					         
					       },
					       emphasis: {
					         focus: 'series'
					       },
						   data:[15,18,22,25,22,28,15,21,20,28,28,22,26,28,24,24,27,23,22,24,26]
					     },
					     {
						
					       name: '高铁',
					       type: 'bar',
					       stack: 'total',
					       label: { 
					         	show:true,

					       },
					       emphasis: {
					         focus: 'series'
					       },
						   data:[28,22,21,24,26,22,21,23,30,32,19,22,19,13,22,15,"","","","",""]
					     },
					     {
							
					       name: '大巴',
					       type: 'bar',
					       stack: 'total',
					       label: {
					         	show:true,
					         	},
					       
				
					       emphasis: {
					         focus: 'series'
					       },
						   data:[11,13,18,15,16,15,19,20,8,7,13,14,13,19,15,26,33,32,32,31,27]
					     },
					  {
						
					    name: '其他',
					    type: 'bar',
					    stack: 'total',
					    label: {
					      	show:true,
					    
					    },
					    emphasis: {
					      focus: 'series'
					    },
						data:[7,8,10,7,5,4,15,6,11,7,8,13,9,11,7,9,10,13,15,12,13,9]
					  },
						 
					   ]
					};	
			
			myChart.setOption(option)
		</script>
	</body>
</html>