上传excel文件并绘制成图表

通过input上传xlsx文件，并绘制成图表，代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="js/jquery.js"></script>
    <script src="js/xlsx.core.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <title>上传excel文件并绘制成图表</title>
</head>

<body>
    <input type="file" id="file">
    <div id="container" style=" 400px; height: 400px;"></div>
    <script>
        $('#file').change(function (e) {
            var files = e.target.files;

            var fileReader = new FileReader(); // 将文件内容读入内存
            fileReader.onload = function (ev) { // 当读取操作成功完成时调用
                // console.log(this.result); // 查看文件输出内容
                try {
                    var data = ev.target.result,

                        //以二进制流方式读取得到表格中数据  
                        workbook = XLSX.read(data, { type: 'binary' }),
                        info = [];//存储获取到的数据  
                } catch (e) {
                    alert('文件类型不正确');
                    return;
                }

                var fromTo = '';
                //遍历每张表读取  
                for (var sheet in workbook.Sheets) {
                    if (workbook.Sheets.hasOwnProperty(sheet)) {
                        fromTo = workbook.Sheets[sheet]['!ref'];
                        info = info.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                    }
                }

                // 添加代码
                var chart = echarts.init(document.getElementById('container'));

                var info2 = [];
                for (var i = 0; i < info.length; i++) {
                    var dataX = info[i].date;
                    var dataY = info[i].data;
                    var data1 = [dataX, dataY];
                    info2.push(data1);
                }
                var infoListX = info2.map(function (item) {
                    return item[0];
                });
                var infoListY = info2.map(function (item) {
                    return item[1];
                });
                option = {
                    visualMap: [{ // 视觉映射组件
                        show: false,
                        type: 'continuous',
                        seriesIndex: 0,
                        min: 0,
                        max: 400
                    }],
                    title: [{
                        left: 'center',
                        text: '柱状图'
                    }],
                    tooltip: { // 是否显示提示框组件
                        trigger: 'item' // 触发类型
                    },
                    xAxis: [{
                        data: infoListX.sort()
                    }],
                    yAxis: [{
                        splitLine: { show: false }
                    }],
                    grid: [{
                        bottom: '40',
                        right: '40',
                        left: '40',
                        top: '60'
                    }],
                    series: [{ // 系列列表
                        type: 'bar', // 图表类型
                        showSymbol: false,
                        data: infoListY
                    }]
                };
                chart.setOption(option);
            };
            //以二进制方式打开文件  
            fileReader.readAsBinaryString(files[0]);
        });  
    </script>
</body>

</html>

1.jquery.js的下载地址：http://www.bootcdn.cn/jquery/

2. xlsx.core.min.js的下载地址：https://github.com/SheetJS/js-xlsx/tree/master/dist

3. echarts.min.js的下载地址：http://echarts.baidu.com/download.html

其中echarts是一个图表插件，也可以使用highcharts插件，至于哪个插件比较好？我只能说仁者见仁智者见智吧，看个人爱好吧

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/-bingyan/p/8066650.html