echarts通过数据视图导出excel文件

最新推荐文章于 2023-06-01 09:35:27 发布

乱搭巴士

最新推荐文章于 2023-06-01 09:35:27 发布

阅读量3k

点赞数 2

分类专栏：个人学习_本科生

本文链接：https://blog.csdn.net/qq_45128278/article/details/103467612

版权

个人学习_本科生专栏收录该内容

61 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sorts</title>

    <script src="../../static/js/echarts.js"   type="text/javascript"></script>
    <script src="../../../static/js/jquery.js" type="text/javascript"></script>
    <script src="../../../static/js/jquery.table2excel.js" type="text/javascript"></script>
    <script src="../../../static/js/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<script src="../../static/js/echarts.js"   type="text/javascript"></script>


<!--<input type="file" id="excel-file" @change="updateFile" onclick="updateFile()">-->
<div id="main" style="width: 1000px;height:600px;"></div>
<script type="text/javascript">
    // function updateFile(e) {
    //     var files = e.target.files;
    //     console.log(files)
    // }

    //初始化echarts图表
    var myChart = echarts.init(document.getElementById("main"));
    var option = {
        title: {
            text: '排序算法效率对比'
        },toolbox: {
            right: '20px',

            feature: {
                dataView: {
                    show: true,
                    title: '数据视图',
                    //readOnly: true, //设置只读，会隐藏刷新按钮。
                    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
                        });
                    },
                    optionToContent: function (opt) {
                        // console.log(opt);

                        var axisData = opt.xAxis[0].data; //坐标数据
                        var series = opt.series; //折线图数据
                        var tdHeads = '<td  style="padding: 0 10px">时间</td>'; //表头第一列
                        var tdBodys = ''; //表数据
                        //组装表头
                        var nameData = new Array('田头价格', '批发价格', '零售价格', '交易量');
                        for (var i = 0; i < nameData.length; i++) {
                            tdHeads += '<td style="padding: 0 10px">' + nameData[i] + '</td>';
                        }
                        var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
                        //组装表数据
                        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.toFixed(2) + '</td>';
                                } else {
                                    tdBodys += '<td></td>';
                                }
                            }
                            table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                            tdBodys = '';
                        }
                        table += '</tbody></table>';
                        // console.log(table);
                        return table;

                    }
                },
                dataZoom: { show: true, title: { zoom: '区域缩放', back: '区域缩放还原' } },
                saveAsImage: { show: true }
            }
        },
        xAxis: {
            type: 'category',
            data: ['100000', '200000', '300000', '400000']
        },
        yAxis: {
            type: 'value'
        },
        series: [{data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line'},{data: [120, 332, 201, 434, 190, 330, 320], type: 'line'}]
    };

    myChart.setOption(option);
</script>
</body>
</html>

原参考文章：https://www.cnblogs.com/hao-1234-1234/p/9257043.html

乱搭巴士

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
echarts通过数据视图导出excel文件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Sorts</title> <script src="../../static/js/echarts.js" type="text/javascript...
复制链接

扫一扫