echarts 表格实现统计和导出表格的功能

最新推荐文章于 2024-02-21 17:35:00 发布

每天发布一篇原创

最新推荐文章于 2024-02-21 17:35:00 发布

阅读量1.3k

点赞数

分类专栏： echarts 文章标签： vue.js echarts

本文链接：https://blog.csdn.net/qq_26728817/article/details/112003890

版权

echarts 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

首先看下效果图
在这里插入图片描述
大概实现的功能是数量统计和一个导出Excel表格的功能
用到是echarts toolbox这个属性
本来想带大家看看官网关于这个属性的介绍，最近官网换链接有时候就打不开

 toolbox: {
            show: true,
            feature: {
                dataView: {
                    show: true,
                    readOnly: false,
                    //增加导出Excel
                    lang: ['数据视图', '关闭', '导出Excel'],
                    contentToOption: function (opts) {
                        $("#tableExcel_Day").table2excel({
                            exclude: ".noExl", //过滤位置的 css 类名
                            filename:  '表格' + ".xls", //文件名称
                            name: "Excel Document Name.xls",
                            exclude_img: true,
                            exclude_links: true,
                            exclude_inputs: true
                        });
                    },
                    //头部颜色
                    backgroundColor:"rgb(11, 79, 174,0.8)",
                    //按钮颜色
                    buttonColor:"#2a66b5",
                    //按钮字体颜色
                    buttonTextColor:'#fff',
                    //表格背景颜色
                    textareaBorderColor:"#2a66b5",
                    //表格字体颜色
                    textColor:'#fff',
                    optionToContent: function (opt) {
                             console.log(opt);//不同的表格打印这个分别赋值给下面 axisData和series

                        var axisData = opt.xAxis[0].data; //坐标名称
                        var series = opt.series; //数据
                        var tdHeads = '<td  style="padding:5px 10px">街道</td>';
                        var tdBodys = ''; //表数据
                        //组装表头
                        var nameData = new Array('个人访', '群体访');
                        for (var i = 0; i < nameData.length; i++) {
                            tdHeads += '<td style="padding: 5px 10px">' + nameData[i] + '</td>';
                        }
                        var table = '<table id="tableExcel_Day" class="echarts-table" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
                        //组装表数据
                        var tableCount = [];
                        for (var i = 0, l = axisData.length; i < l; i++) {
                            for (var j = 0; j < series.length ; j++) {
                                var temp = series[j].data[i];
                                if (temp != null && temp != undefined) {
                                    tdBodys += '<td>' + temp+ '</td>';
                                    console.log(temp);
                                    if (tableCount[j]) {
                                        tableCount[j] +=temp;
                                    } else {
                                        tableCount[j] = temp;
                                    }
                                } else {
                                    tdBodys += '<td></td>';
                                }
                            }
                            table += '<tr><td style="padding: 5px 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                            tdBodys = '';
                        }
                        console.log(tableCount);
                        let heji=''
                        for(k in tableCount){
                            heji+='<td>'+tableCount[k]+'</td>'
                        }
                        table += '<tr><td style="padding: 5px 10px">合计：</td>' + heji+ '</tr>';
                        table += '</tbody></table>';
                        // console.log(table);
                        return table;

                    }
                },
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {
                    show: true,
                    backgroundColor: '#073fa4f7'

                }
            },
            iconStyle: {
                borderColor: 'white'
            }
        },

关于表格的样式自己定义，关于封装以后发布文章会加上，如果少量先这个写