vue+element+echarts餅狀圖+可摺疊列表

html:

<div id="echartsDiv" style="width: 48%; height: 430px; float: left;">
    </div>
    <div id="tableDiv" style="width: 52%;float: left;">
        <el-table :data="tableData" border row-key="id" style="margin: 0 auto" :row-class-name="getRowClassName">
            <el-table-column fixed type="index" label="序號" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column fixed prop="sourceName" label="投訴方式" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="totalCount" label="數量" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column prop="completedPercent" label="百分比" align="center" show-overflow-tooltip></el-table-column>
            
        </el-table>
    </div>

 js:

var vue = new Vue({ el: '#app', data: { // 指定圖表的配置項和數據 option : { // 圖標標題 title : { text: '投訴方式統計', x:'center' }, // 提示框組件 tooltip : { trigger: 'item', // 字符串模板,餅圖、儀表盤、漏斗圖: {a}（系列名稱），{b}（數據項名稱），{c}（數值）, {d}（百分比） formatter: "{a}</br>{b} : {c} ({d}%)" }, // 圖例組件 legend : { orient: 'horizontal', bottom: 'bottom', data: [] }, series : { name: '投訴方式', type: 'pie', radius : '50%', center: ['50%', '50%'], label : { normal : { show : true, formatter : "{b} : {c} ({d}%)" } }, data:[], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } },// 接口返回的結果集合 backResultData:[], // 表格數據 tableData:[], // 行展開後的子表格數據 subTableData:[] },

successCallBack : function(result){ if(result.success){ // 接口返回的結果集合 backResultData = result.data; // 設置餅圖數據，普通for循環遍歷，餅圖去除總計列 for(var i=0; i<result.data.length-1; i++){ var resultData = result.data[i]; if(!resultData.parentName){ self.option.legend.data.push(resultData.sourceName); self.option.series.data.push({ value : parseInt(resultData.totalCount), name : resultData.sourceName }); } } // 設置表格數據 for(var i=0; i<result.data.length; i++){ // 取出返回結果集合中的對象 changeObj = result.data[i]; if(!changeObj.parentName){ // 設置子表格數據 for(var j=0; j<backResultData.length-1; j++){ if(backResultData[j].parentName==changeObj.sourceName){ self.subTableData.push(backResultData[j]); } } // 給changeObj對象添加children屬性，並賦值一個由接口返回列表中對象組成的數組 changeObj.children=self.subTableData; self.tableData.push(changeObj); } // 存放子表格數據的數組每次父表元素以後都置空 self.subTableData=[]; // 百變對象置空 changeObj={}; } console.log(self.tableData); // 基於準備好的DOM，初始化echarts實例 var myChart = echarts.init(document.getElementById('echartsDiv')); // 使用剛指定的配置項和數據顯示圖表 myChart.setOption(self.option); } }

效果：

 其中，只有element2.8及其以上版本才支持列表摺疊子列表的，前面版本支持列表展開行是本行的詳情信息；