使用echarts将Excel的数据可视化

最新推荐文章于 2024-08-01 12:43:01 发布

z6q6k6

最新推荐文章于 2024-08-01 12:43:01 发布

阅读量1.3w

点赞数 13

本文链接：https://blog.csdn.net/qq_41664159/article/details/107316431

版权

一、失败原因

我的解决办法：

1、因为我的数据是是事先处理好的，也不太大，所以直接复制到代码中以数组处理了。

2、数据存储再数据库中，后端读取，前端调用。

一、失败原因

读取Excel文件前，必须手动选择Excel文件位置，不能默认一个位置（直接写死路径）。

这是浏览器的安全限制，禁止浏览器直接读取电脑文件，必须由用户触发完成,不能由代码设置,否则会对用户数据构成威胁.

web端读取电脑文件必须使用file类型的传参，不能使用地址（如D:\\a.txt），file类型来源一般是<input type="file" name="file" />，而input file上传按钮选择文件后的value是无法直接获取到的，也无法修改，

看看下面代码会更清楚。

我的解决办法：

1、因为我的数据是是事先处理好的，也不太大，所以直接复制到代码中以数组处理了。

2、数据存储再数据库中，后端读取，前端调用。

二、SheetJS

SheetJS能读取，编辑和导出Excel

可在网络浏览器和服务器中使用

社区版文档：https://docs.sheetjs.com/

三、Excel中数据

time为时间格式，读取的时候转化为浮点数的格式，要手动调整。

四、成果

五、代码

<!--input file打开文件选择框，获取文件信息，并传参给readWorkbookFromLocalFile函数-->
<form>
    <input type="file" name="file" onchange="readWorkbookFromLocalFile(this.files[0])"/>
</form>

请debug这段代码，看看file类型的数据，file.result，

和这个函数的运行次序！！！

// 读取本地excel文件
function readWorkbookFromLocalFile(file) {
    var reader = new FileReader();
    reader.onload = function(e) {
        var data = e.target.result;
        var workbook = XLSX.read(data, {type: 'binary'});
        // 处理excel文件
        handle(workbook);
    };
    reader.readAsBinaryString(file);
    //通过FileReader对象读取文件，利用js-xlsx转成json数据
    //FileReader共有4种读取方法：
    //1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
    //2.readAsBinaryString(file)：将文件读取为二进制字符串
    //3.readAsDataURL(file)：将文件读取为Data URL
    //4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
}

<!--这是一个网上关于读取Excel最经典的代码-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="newjs/js/incubator-echarts-4.8.0/dist/echarts.min.js"></script>

    <script src="https://blog-static.cnblogs.com/files/xieyongbin/xlsx.full.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
</head>

<body >
<!--input file打开文件选择框，获取文件信息，并传参给readWorkbookFromLocalFile函数-->
<form>
    <input type="file" name="file" onchange="readWorkbookFromLocalFile(this.files[0])"/>
</form>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 500px;height:350px;"></div>

<script type="text/javascript">
    // 读取本地excel文件
    function readWorkbookFromLocalFile(file) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var data = e.target.result;
            var workbook = XLSX.read(data, {type: 'binary'});
            // 处理excel文件
            handle(workbook);
        };
        reader.readAsBinaryString(file);
        //通过FileReader对象读取文件，利用js-xlsx转成json数据
        //FileReader共有4种读取方法：
        //1.readAsArrayBuffer(file)：将文件读取为ArrayBuffer。
        //2.readAsBinaryString(file)：将文件读取为二进制字符串
        //3.readAsDataURL(file)：将文件读取为Data URL
        //4.readAsText(file, [encoding])：将文件读取为文本，encoding缺省值为'UTF-8'
    }

    // 处理excel文件
    var date1=[];
    var date2=[];
    function handle(workbook) {
        // workbook.SheetNames[0] excel第一个sheet
        var datas = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
        var title=[];
        if(datas.length > 0){
            // 获取列名是汇总列名，避免某行某个字段没有值，会缺少字段
            // 标题

            // 获取每行数据
            first:
                for(var index in datas){ // datas数组，index为索引
                    second:
                        for(var key in datas[index]){ // datas[index]对象,key为键
                            if (-1 === title.indexOf(key)) {
                                title.push(key);

                            }
                        }
                }
            // 列名
            console.log(title);
            // 数据
            console.log(datas);

            //时间转化，并把datas中数据分列
            for(var i=0;i<datas.length;i++){
                var a=datas[i].time*24;
                var b=(a-parseInt(a))*60;
                var c=(b-parseInt(b))*60;
                date1[i]=parseInt(a).toString()+":"+parseInt(b).toString()+":"+parseInt(c).toString();
                date2[i]=datas[i].sum;
            }

            console.log(date1);
            console.log(date2);
            aaa();
        }

    }

</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    function aaa()
    {
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        option = {
            tooltip: {
                trigger: 'axis',
                position: function (pt) {
                    return [pt[0], '10%'];
                }
            },
            title: {
                left: 'center',
                text: '大数据量面积图',
            },
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: date1
            },
            yAxis: {
                type: 'value',
                boundaryGap: [0, '100%']
            },
            dataZoom: [{
                type: 'inside',
                start: 0,
                end: 10
            }, {
                start: 0,
                end: 10,
                handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                handleSize: '80%',
                handleStyle: {
                    color: '#fff',
                    shadowBlur: 3,
                    shadowColor: 'rgba(0, 0, 0, 0.6)',
                    shadowOffsetX: 2,
                    shadowOffsetY: 2
                }
            }],
            series: [
                {
                    name: '人流量',
                    type: 'line',
                    smooth: false,
                    symbol: 'none',

                    itemStyle: {
                        color: 'rgb(255, 70, 131)'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgb(255, 158, 68)'
                        }, {
                            offset: 1,
                            color: 'rgb(255, 70, 131)'
                        }])
                    },
                    data: date2
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

</script>
</body>
</html>