本文用Vue2.0+elementUI的panel组件和table组件+echarts的柱状图和折线图实现对结果的展示，实现了表格和图之间的切换和图和表之间的转置。
-html
<div class="resultDiv">
<div id="panels">
<el-collapse>
<el-collapse-item v-for="item in indicators">
<template slot="title">
<span class='resulticon'>
{{item.indicatorName}}
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="el-icon-upload2" :class="item.indicatorName" download="somedata.xls" @click="return exportExcel(item.indicatorName)"
data-command="show" title="保存为表"></a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="glyphicon glyphicon-repeat" aria-hidden="true" @click="convert" data-command="show" title="图表切换"></a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="glyphicon glyphicon-transfer" 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 style="width: 100%">
<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 : [
{
