【需求】
bootstrap-table表格中对某一行进行操作,点击按钮后展示表格中这个记录的数据的echart曲线图,比如展示cpu_util的趋势图
实现:
html:
<table id="taskTable"style="margin-left: 10px;width: 99%;"
class="table search table-bordered table-condensed table-sm text-left"
data-classes="table table-hover"
data-toggle="table"
data-tooltip="show"
data-url="/tasks/taskList"
...
>
<thead class="table-info text-left">
<tr>
<th data-field="state" data-checkbox="true"></th>
...
<th data-formatter="actionFormatter" data-events="actionEvents" data-field="" >operate</th>
</tr>
</thead>
</table>
Javascript:
var actionEvents = {
'click .data-echart' : function(e, value, row, index) {
$.ajax({
url: '/xxx/echarts?id='+row.id, //向后端请求数据
type: 'GET',
。。
dataType: "json",
success: function(response) {
for(var i=0; i<response.length;i++){
if(response[i].data_type == 'cpu_usage'){
$('#dataEchartContainer').show();
$('dataEchartContainer').css("font-family: 'Arial', sans-serif;")
var mychart_cpu = echarts.init(document.getElementById("cpu-echart"));
mychart_cpu.clear();
console.log("cpu data_list",response[i].all_data_list);
var option = {
title: {text: 'CPU Util'},
tooltip: {trigger: 'axis'},
grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},
toolbox: {feature: {saveAsImage: {},magicType: {show: true,title: {line: '切换为折线图',bar: '切换为柱状图',},type: ['line', 'bar']}}},
xAxis: {type: 'category',boundaryGap: false,data: getEchartsxAxis(response[i])},
yAxis: {type: 'value'},
series: []
};
mychart_cpu.setOption(option);
};
}
},
}
}