vue + element + echarts collapsible list pie +

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:

VUE new new Vue = var ({ 
    EL: '#app', 
    Data: { 
        // the specified configurations and graph data 
        Option: { 
            // Title icon 
            title: { 
                text: 'Complaint statistics', 
                X: 'Center' 
            } , 
            // balloon assembly 
            ToolTip: { 
                Trigger: 'item', 
                // template string, pie, instrument panel, funnel: {a} (family name), {b} (data item name), {c} (value), {d} (percentage) 
                Formatter: "{A} </ br > {B}: {C} ({D}%)" 
            }, 
            // assembly Legend 
            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)'
                        } 
                    } 
                } 
            
        } // the interface returns the result set 
        backResultData: [], 
        // table data 
        tableData: [], 
        spreadsheet data line // expand 
        subTableData: [] 
    },

successCallback: function (Result) { 
                    IF (result.success) { 
                        result // return the set of interfaces 
                        backResultData = result.data; 
                        // set the pie data, normal for loop iterates, pie total removal column 
                        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: the parseInt (resultData.totalCount),
                                    name: resultData.sourceName  
                                });
                            } 
                        } 
                        // set table data 
                        for (var I = 0; I <result.data.length; I ++) { 
                            // remove objects returned in the result set 
                            changeObj = result.data [I];
                             IF ( ! changeObj.parentName) { 
                                // set the sub-table data 
                                for (var J = 0; J <-backResultData.length. 1; J ++) { 
                                    IF (backResultData [J] .parentName == changeObj.sourceName) {
                                        self.subTableData.push (backResultData [J]); 
                                    } 
                                } 
                                // Add to changeObj children property objects, and assign a list of objects in the interface returns an array of 
                                changeObj.children = self.subTableData;
                                 self.tableData.push (changeObj ); 
                            } 
                            // storage array after each sub-table data element in the parent table blanking 
                            self.subTableData = [];
                             // Variety objects blanking 
                            changeObj = {};
                         } 
                        the console.log (self.tableData);
                        // prepared based DOM, instance initialization echarts 
                        var myChartEcharts.init = (document.getElementById ( 'echartsDiv'));
                         // just use the specified configuration data items and display the chart 
                        myChart.setOption (self.option); 
                    } 
                }

effect: