流出人群交通工具使用人数图表

梦兮呀

于 2024-01-02 19:42:30 发布

阅读量362

点赞数 10

文章标签： echarts

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

版权

利用ECharts构建的图表显示广东省流出人群选择的不同交通工具人数，数据来自line.json，具有图例提示和坐标轴说明。

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

通过折线图直观的展示广东省流出人群使用的不同交通工具分别对应的人数

数据源：line.json

要求：

图表标题：流出人群交通工具使用人数图表，副标题“模拟数据”
增加提示tooltip，坐标轴触发
添加图例
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 ={
				title: {
				    text: "流出人群交通工具使用人数图表",
				    subtext: "模拟数据",
				    left: "center",
					top: "0%",
				    textStyle: {
				      fontSize: 20
				    },
				    subtextStyle: {
				      fontSize: 10
				    }
				  },
				  
				tooltip: {
				    triggerOn: "none",
				    alwaysShowContent: true,
				    position: function(pt) {
				      return [pt[0], 130];
				    },
				    trigger: "axis"
				  },
				
				xAxis:{
					//让x轴起点不是0点
					boundaryGap:false,
					
					axisTick: {
					    alignWithLabel: true
					},
					axisLine:{
						show:true,
						color:"rgba(0, 0, 0, 1.0)"
					},
				},  
				
				yAxis:{
					min:0,
					max:2,
					name:'百分比',
					type: "value",
					show:true,
					axisLine:{
						show:true,
						color:"rgba(0, 0, 0, 1.0)"
					},
			},
			
			series:[
				{
					type:'line',
					itemStyle:{
						color:'#ec5a5a',
					},
					areaStyle: {
						color:'#ec5a5a',
					}
					}]
			};
			
			    var names =[];
				var nums = [];
				//异步调用
			$.get('data/line.json',function(result){
				$.each(result.list,function(index,item){
					names.push(item.types)
					nums.push({
						value:item.num,
						name:item.types
					});
				});
				option.xAxis.data = names
				option.series[0].data = nums
				myChart.setOption(option)
			})
			
		</script>
	</body>
</html>