Echarts循环显示的一个例子

先上张效果图：

如果有多个，会依次往下排。本来考虑用表格table、td、tr来实现，但问题是不好做循环，后来考虑到用<li>标签来做，但由于运用echarts画柱状图与饼状图时需要规定宽度与高度，<li>不能直接对高度进行设定，最后考虑使用<div>来实现，通过属性display:inline来实现4列。部分代码如下：

<span style="font-size:14px;">	for(var i = 0 ; i < 1; i++){
		//初始化4个节点
		$('#cluster_top_10').append(
		'<div id="cluster_' + i + '" style="width:25%;height:' + top10Height + 'px;display:inline;float:left;"></div>'+
		'<div id="cpu_' + i + '" style="width:25%;height:' + top10Height + 'px;display:inline;float:left;"></div>'+
		'<div id="mem_' + i + '" style="width:25%;height:' + top10Height + 'px;display:inline;float:left;"></div>'+
		'<div id="disk_' + i + '" style="width:25%;height:' + top10Height + 'px;display:inline;float:left;"></div>');
        }  
</span>

学习到的几个点：

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

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

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

<span style="font-size:14px;">        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);</span>

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

5.勇于尝试。

以上。