跨省流出人群分布洞察表

梦兮呀

于 2024-01-02 19:40:26 发布

阅读量382

点赞数 8

文章标签： echarts

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

版权

通过多样性柱状图直观的展现广东省流出到其他一些省份的人数。

数据源：bar.json

要求：

背景：颜色 #6a7985
x轴：名称“省份”，字体颜色#91d4ff，字体大小14
y轴：名称“万人”，字体颜色和大小同x轴。y轴添加分隔线，分隔线颜色#003982
柱体宽14，顶部圆角
柱体颜色渐变：上面#BA55D3，中间#7395ff，底部#0000FF
柱体透明度 0.85

结果示例：

<!DOCTYPE html>
<html lang="en">
	<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>
		<script src="js/dark.js"></script>
	</head>
	<body>
		<div id="main" style="width: 800px;height: 600px;"></div>
		
		<script type="text/javascript">
			var myChart =echarts.init(document.getElementById("main"),'dark');
			
			var option ={
				backgroundColor: "#6a7985",
				xAxis:{
					name:'省份',
				//	data:['湖南省','广西省','江西省','四川省','湖北省','台湾省'],
					nameTextStyle:{
						color:'#91d4ff',
						fontSize:12,
					},
					axisLabel:{
						color:"rgba(110, 240, 255, 0.57)"
					},
					axisLine:{
						show:true,
						color:"rgba(16, 41, 150, 0.6)"
					},
				},
				
				yAxis:{
					name:'万人',
					type: "value",
					show:true,
					nameTextStyle:{
						color:'#91d4ff',
						fontSize:12,
						},
					//y轴分隔线
					 splitLine:{
						  lineStyle:{
							  color:'#003982',
						  }
					 },
					 axisLabel:{
					 	color:"rgba(110, 240, 255, 0.57)"
					 },
					 axisLine:{
					 	show:true,
					 	color:"rgba(0, 0, 143, 1.0)"
					 },
				},
				
			    tooltip:{
					trigger:'axis',
					formatter:'{b}:{c}'
				}, 
				series:[
					{
						type:'bar',
						name:'销量',
						data:[5,20,36,10,10,20],
						opacity:0.85,
						barWidth: 14,
						itemStyle:{
					
							normal:{
								
								borderRadius: [100, 100,0,0],
								
								//渐变
								color:new echarts.graphic.LinearGradient(0,0,0,1,[
									{offset:0,color:'#BA55D3'},
									{offset:0.5,color:'#7395ff'},
									{offset:1,color:'#0000FF'},
								])
						},
							},
					}
					 ]
					};	
				
				var names =[];
				var nums = [];
				//异步调用
			$.get('data/bar.json',function(result){
				$.each(result.list,function(index,item){
					names.push(item.province)
					nums.push({
						value:item.num,
						name:item.province
					});
				});
				option.xAxis.data = names
				option.series[0].data = nums
				myChart.setOption(option)
			})
			
		</script>
	</body>
</html>