栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 前沿技术 > 大数据 > 大数据系统

JavaScript大数据图表(堆积柱状图),数据在外部JSON中

JavaScript大数据图表(堆积柱状图),数据在外部JSON中

注意:需要导入jquery.js以及echarts.js

echarts.js:下载 - Apache ECharts

jquery.js:Download jQuery | jQuery

注意:json外部的路径  :    “$.get("json/tu1.json", function(data)”

效果:

 

HTML:


	
		
		燃料类型比例与数量:按企业分
		
		
	
	
		#bt01 {
			width: 900px;
			height: 500px;
		}
	
	
		

		
	
	

JSON:
[
	{
		"type":"汽油",
		"value":[
			{
				"car":"湖南巴士",
				"sl":"355"
			},
			{
				"car":"宝骏巴士",
				"sl":"245"
			},
			{
				"car":"龙骧巴士",
				"sl":"247"
			}
		]
	},
	{
		"type":"柴油",
		"value":[
			{
				"car":"湖南巴士",
				"sl":"425"
			},
			{
				"car":"宝骏巴士",
				"sl":"335"
			},
			{
				"car":"龙骧巴士",
				"sl":"217"
			}
		]
	},
	{
		"type":"油电混动",
		"value":[
			{
				"car":"湖南巴士",
				"sl":"62"
			},
			{
				"car":"宝骏巴士",
				"sl":"78"
			},
			{
				"car":"龙骧巴士",
				"sl":"54"
			}
		]
	},
	{
		"type":"电动",
		"value":[
			{
				"car":"湖南巴士",
				"sl":"101"
			},
			{
				"car":"宝骏巴士",
				"sl":"122"
			},
			{
				"car":"龙骧巴士",
				"sl":"111"
			}
		]
	},
	{
		"type":"天然气",
		"value":[
			{
				"car":"湖南巴士",
				"sl":"44"
			},
			{
				"car":"宝骏巴士",
				"sl":"65"
			},
			{
				"car":"龙骧巴士",
				"sl":"45"
			}
		]
	},
	{
		"type":"原装双燃料",
		"value":[
			{
				"car":"湖南巴士",
				"sl":"35"
			},
			{
				"car":"宝骏巴士",
				"sl":"42"
			},
			{
				"car":"龙骧巴士",
				"sl":"34"
			}
		]
	}
	
]

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/671559.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号