zoukankan      html  css  js  c++  java
  • vue+element+echarts饼状图+可折叠列表

    html:

    <div id="echartsDiv" style=" 48%; height: 430px; float: left;">
        </div>
        <div id="tableDiv" style=" 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及其以上版本才支持列表折叠子列表的,前面版本支持列表展开行是本行的详情信息;

  • 相关阅读:
    ssh 文件传输
    Alipay秘钥问题
    Linux kilin 安装和按键服务器步骤
    常用资源地址
    tomcat虚拟路径
    Dockerfile注意事项
    Ceph部署(二)RGW搭建
    Docker存储驱动之OverlayFS简介
    rdb map出错rbd sysfs write failed
    CEPH-DEPLOY INSTALL时,远端节点在执行APT-GET UPDATE命令时失败
  • 原文地址:https://www.cnblogs.com/wmqiang/p/11022860.html
Copyright © 2011-2022 走看看