<div> <div> <el-collapse> <el-collapse-item v-for="item in indicators"> <template slot="title"> <span> {{item.indicatorName}} <a href="#" :class="item.indicatorName" download="somedata.xls" @click="return exportExcel(item.indicatorName)" data-command="show" title="保存为表"></a> <a href="#" aria-hidden="true" @click="convert" data-command="show" title="图表切换"></a> <a href="#" aria-hidden="true" @click="transpose" data-command="show" title="行列转置"></a> </span> </template> <template> <div v-show="tableAndMap==3?true:tableAndMap==1?true:false" :id="item.indicatorName"></div> </template> <template v-if="tableAndMap==3?true:tableAndMap==2?true:false"> <el-table :data="item.tableData" max-height="300" stripe border fix> <el-table-column v-for="(column,index) in item.columns" :prop="column" :fixed="index==0" :label="column" min-width="150"></el-table-column> </el-table> </template> </el-collapse-item> </el-collapse> </div> </div>
js，panel组件的代码
var panelsVue = new Vue({ el : "#panels", props : ["initData","indicators","mapOptions"], data : { rowOrColumn : false, //行列转换 tableOrMap : true, //表和图切换 tableAndMap : 3, //表和图同时显示 mapInitOption : { title: { text: '' }, tooltip : { trigger: 'axis' }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', boundaryGap : false } ], yAxis : [ { type : 'value', axisLabel : { formatter: '{value}' } } ] } //echarts 初始化参数 }, methods:{ table : function(ev){ if(this.rowOrColumn){ this.indicators=this.listToRowObject(this.initData); this.mapOptions= this.listToColumnMap(this.initData); this.rowOrColumn=false; }else{ this.indicators=this.listToColumnObject(this.initData); this.mapOptions= this.listToRowMap(this.initData); this.rowOrColumn=true; } for(var i=0;i<this.mapOptions.length;i++){ var indicatorName= this.mapOptions[i].title.text; var dom = document.getElementById([indicatorName]) var heigth = $(dom).siblings('div').height()*1.5; var width = $(dom).siblings('div').width(); $(dom).css({ height:heigth, width:width }); var myChart= echarts.init(document.getElementById([indicatorName]),'macarons'); myChart.setOption(this.mapOptions[i]); } ev.stopPropagation(); }, listToRowObject :function (ListAndList){ var indicatorNames=[]; var tableDatas=[]; var columns = []; var options = []; ListAndList = ListAndList.indicatorResult; for(var i=0;i<ListAndList.indicatorNames.length;i++){ var objects=[]; var column =[]; var indicatorName = ListAndList.indicatorNames[i]; for(var yIndex in ListAndList[indicatorName]){ var obj = {}; obj[indicatorName]=ListAndList.colKeys[yIndex]; for(var xIndex in ListAndList[indicatorName][yIndex]){ obj[ListAndList.rowKeys[xIndex]]=ListAndList[indicatorName][yIndex][xIndex]; } objects.push(obj); } indicatorNames.push(indicatorName); column.push(indicatorName); column=column.concat(ListAndList.rowKeys); var indicator={}; indicator[indicatorName]=objects; columns.push(column); tableDatas.push(indicator); } for(var j = 0; j<indicatorNames.length;j++){ var indicatorObj = {}; indicatorObj["tableData"]=tableDatas[j][indicatorNames[j]]; indicatorObj["columns"] = columns[j]; indicatorObj["indicatorName"] = indicatorNames[j]; options.push(indicatorObj); } return options; }, listToColumnObject :function (ListAndList) { var options = []; var columns = []; var indicatorNames = []; var indicatorMap = {}; ListAndList = ListAndList.indicatorResult; for (var i = 0; i < ListAndList.indicatorNames.length; i++) { var column = []; var objs = []; var indicatorName = ListAndList.indicatorNames[i]; indicatorNames.push(indicatorName); column.push(indicatorName); column = column.concat(ListAndList.colKeys); columns.push(column); var indicatorData = []; indicatorData.push(ListAndList.rowKeys); indicatorData = indicatorData.concat(ListAndList[indicatorName]); for (var k = 0; k < indicatorData[0].length; k++) { var aRow = {}; for (var j = 0; j < indicatorData.length; j++) { aRow[column[j]] = indicatorData[j][k]; } objs.push(aRow); } indicatorMap[indicatorName] = objs; } for (var j = 0; j < indicatorNames.length; j++) { var indicatorObj = {}; indicatorObj["tableData"] = indicatorMap[indicatorNames[j]]; indicatorObj["columns"] = columns[j]; indicatorObj["indicatorName"] = indicatorNames[j]; options.push(indicatorObj); } return options; }, listToColumnMap: function(ListAndList){ ListAndList = ListAndList.indicatorResult; var options=[]; for(var j = 0;j<ListAndList.indicatorNames.length;j++){ var sigleOption ={}; sigleOption=JSON.parse(JSON.stringify(this.mapInitOption));//实现深复制 sigleOption.xAxis[0]["data"]=ListAndList.rowKeys; var indicatorName = ListAndList.indicatorNames[j]; sigleOption["title"]["text"]=indicatorName; var series =[]; for(var k=0;k<ListAndList[indicatorName].length;k++){ var sigleSerie={type:'line'}; sigleSerie["name"] = ListAndList.colKeys[k]; sigleSerie["data"] = ListAndList[indicatorName][k]; series.push(sigleSerie); } sigleOption["series"]=series; options.push(sigleOption); }; return options; }, listToRowMap: function(ListAndList){ ListAndList = ListAndList.indicatorResult; var options=[]; for(var j = 0;j<ListAndList.indicatorNames.length;j++){ var sigleOption ={}; sigleOption=JSON.parse(JSON.stringify(this.mapInitOption));//实现深复制 sigleOption.xAxis[0]["data"]=ListAndList.colKeys; var indicatorName = ListAndList.indicatorNames[j]; sigleOption["title"]["text"]=indicatorName; var series =[]; for(var k=0;k<ListAndList.rowKeys.length;k++){ var sigleSerie={type:'line'}; var x= []; for(var z = 0;z<ListAndList.colKeys.length;z++){ x.push(ListAndList[indicatorName][z][k]); } sigleSerie["name"] = ListAndList.rowKeys[k]; sigleSerie["data"] = x; series.push(sigleSerie); } sigleOption["series"]=series; options.push(sigleOption); }; return options; }, map : function(ev){ if(this.tableAndMap==1){ this.tableAndMap=2; }else if(this.tableAndMap==2){ this.tableAndMap=3; }else{ this.tableAndMap=1; } ev.stopPropagation(); }, exportExcel : function(indicatorName,my){ debugger; console.log(indicatorName); var listAndList = JSON.parse(JSON.stringify(this.initData.indicatorResult)); var rowTd = listAndList.rowKeys; var excellData=[]; rowTd.splice(0,0,indicatorName); excellData.push(rowTd); for(var i = 0;i<listAndList[indicatorName].length;i++){ var rowTr = listAndList[indicatorName][i]; rowTr.splice(0,0,listAndList.colKeys[i]); excellData.push(rowTr); } return ExcellentExport.excelByData($("."+indicatorName)[0], excellData, 'Sheet', 'download' + new Date().getTime() + '.xls'); } }, watch : { initData : function(newValue){ this.indicators=this.listToRowObject(newValue); } }, mounted : function(){ } }); Vue.set(panelsVue,'initData',ListAndList);