先上张效果图:
如果有多个,会依次往下排。本来考虑用表格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.勇于尝试。
以上。