Echarts循环显示的一个例子

先上张效果图：

如果有多个，会依次往下排。本来考虑用表格table、td、tr来实现，但问题是不好做循环，后来考虑到用

标签来做，但由于运用echarts画柱状图与饼状图时需要规定宽度与高度，

不能直接对高度进行设定，最后考虑使用

来实现，通过属性display:inline来实现4列。部分代码如下：

	for(var i = 0 ; i < 1; i++){
		//初始化4个节点
		$('#cluster_top_10').append(
		'
'+
		'
'+
		'
'+
		'
');
        }  

学习到的几个点：

1.循环时，元素的id可以根据每次循环的i值来命名，后期比较好处理，也可以通过当前的时间戳来实现。

2.几个div要在同一行显示时，需要通过属性display:inline来使其变为行内元素，但在本例中，加了该属性后还是不能实现4个div在同一行的效果，百度之后得到解决方法在每个元素添加属性float:left，问题虽然解决了，但还是不太明白为什么这样就可以了。

3.以下代码在初始化echarts的时候获取元素id后get(0)

        myClusterChart = echarts.init($('#cluster_' + i).get(0));
        myCpuChart = echarts.init($('#cpu_'+i).get(0));
        myMemChart = echarts.init($('#mem_'+i).get(0));
	myDiskChart = echarts.init($('#disk_'+i).get(0));
	myClusterChart.setOption(option_bar);
	myCpuChart.setOption(option_cpu_pie);
	myMemChart.setOption(option_mem_pie);
	myDiskChart.setOption(option_disk_pie);

4.echarts的数据源都是以数组的形式传入的。

5.勇于尝试。

以上。