bootstrap-table表格中按行显示echart趋势图

【需求】

    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);
    
                          };
                        
                
                     }
                 },

         }

    }