vue+element+echarts饼状图+可折叠列表

Easter79
• 阅读 993

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

效果:

vue+element+echarts饼状图+可折叠列表

 其中,只有element2.8及其以上版本才支持列表折叠子列表的,前面版本支持列表展开行是本行的详情信息;

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
梦
3年前
图片放大显示全屏
html代码<divid"outerdiv"style"position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);zindex:2;width:100%;height:100%;display:none;"<divid"innerdiv"style"position:abs
Wesley13 Wesley13
2年前
java反射, 不看你可别后悔
<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,
Stella981 Stella981
2年前
AndroidStudio封装SDK的那些事
<divclass"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2.55,5z"id"raphael
Stella981 Stella981
2年前
PhoneGap设置Icon
参考:http://cordova.apache.org/docs/en/latest/config\_ref/images.html通过config.xml中的<icon标签来设置Icon<iconsrc"res/ios/icon.png"platform"ios"width"57"height"57"densi
Stella981 Stella981
2年前
Native memory allocation (mmap) failed to map xxx bytes for committing reserved memory
<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,
Stella981 Stella981
2年前
Spring Boot 2下使用Feign找不到@EnableFeignClients的解决办法
<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,2
Wesley13 Wesley13
2年前
Java8中的LocalDateTime工具类
<divid"content\_views"class"markdown\_views"<!flowchart箭头图标勿删<svgxmlns"http://www.w3.org/2000/svg"style"display:none;"<pathstrokelinecap"round"d"M5,00,
Stella981 Stella981
2年前
IE7、IE8、IE9对min
问题:    IE7、IE8、IE9对minheight不识别,其他无问题解决:   box{width:100px;height:35px;}   htmlbodybox{width:auto;height:auto;width:100px;minheight:35px;} 实例:
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k