百度echarts使用体会,一个页面根据json数组生成多张表格效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>柱状图测试</title>
		<script type="text/javascript" src="jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="echarts.min.js" ></script>
		
		<style>
			 #main div{
				width: 240px;
				height: 120px;
				background-color: #fff;
				margin-bottom: 20px;
			}
		</style>
	</head>

	<body>
		<div id="main"></div>
		<!--动态获取json数据-->
		<script type="text/javascript" >
		    
// 异步加载数据
$.get('data.json').done(function(data) {
	// 填入数据
	for(i = 0; i < data.length; i++) {
		
		//创建空白div
		var num = "test" + i;
		var div = document.createElement("div");
		div.id = num;
		document.getElementById("main").appendChild(div);
		//插件效果初始化
		var myChart = echarts.init(document.getElementById(num));
		myChart.setOption({
			title: {
				//text: '异步数据加载示例'
			},
			tooltip: {},
			legend: {
				//data: ['销量']
			},
			grid: {
				x: 30,
				y: 30,
				x2: 0,
				y2: 5,
				borderWidth: 1
			},
			yAxis: {
				min: 0,
				max: 100,
				interval: 20,
			},
			xAxis: {
				data: data[i].categories
			},
			series: [{
				// 根据名字对应到相应的系列
				name: '销量',
				type: 'bar',
				itemStyle: {
					normal: {               //好,这里就是重头戏了,定义一个list,然后根据所以取得不同的值,这样就实现了,
						color: function(params) {
							// build a color map as your need.
							var colorList = [
								'#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
								'#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
								'#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
							];
							return colorList[params.dataIndex]
						},
						//以下为是否显示,显示位置和显示格式的设置了
						label: {
							show: true,
							position: 'top',
							formatter: '{b}\n{c}'
						}
					}
				},
				data: data[i].data
			}]
		});
	}
});
		</script>
	
	</body>

</html>
[

	{
		"categories": [
			"衬衫",
			"羊毛衫",
			"雪纺衫",
			"裤子",
			"高跟鞋",
			"袜子"
		],
		"data": [
			0,
			80,
			36,
			97,
			72,
			53
		]
	},
	{
		"categories": [
			"衬衫",
			"羊毛衫",
			"雪纺衫",
			"裤子",
			"高跟鞋",
			"袜子"
		],
		"data": [
			5,
			20,
			36,
			10,
			10,
			20
		]
	},
	{
		"categories": [
			"衬衫",
			"羊毛衫",
			"雪纺衫",
			"裤子",
			"高跟鞋",
			"袜子"
		],
		"data": [
			80,
			90,
			100,
			30,
			70,
			50
		]
	}
	
]

欢迎分享本文,转载请保留出处:前端ABC » 百度echarts使用体会,一个页面根据json数组生成多张表格效果

赞 (1)
分享到:更多 ()

发表评论 0