目前的div:
<div class="highchart_items" v-for="item in containers" :id="item.containerId" style="min-width: 310px; height: 400px; margin: 20px auto"></div>
containers为一个数组,例如:
containers:[
{interval:'', containerId:'peakContainer'},
{interval:'oneminute', containerId:'oneMinuteContainer'},
{interval:'fiveminute', containerId:'fiveMinuteContainer'},
{interval:'fifteenminute', containerId:'fifteenMinuteContainer'},
{interval:'thirtyminute', containerId:'thirtyMinuteContainer'},
{interval:'onehour', containerId:'oneHourContainer'}
]
向里面添加数据,渲染图表:
vm.containers.forEach(function (item, index) {
vm.render(url, item.containerId);
});
render:function(url,containerId){}){
/*省略*/
}
隐藏渲染的图表:
vm.containers.forEach(function(item, index){
$(".highchart_items")[index].style.display="none";
});
搞定,以上是部分是伪代码,提供个思路进行操作。