需要被读取的excel文件

源码

1.引用插件

1
<script src="./xlsx.full.min.js"></script>

或

1
2
yarn add xlsx
import XLSX from 'xlsx'

2.上传本地文件插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
var File = (function () {
    var that;
    var obj = function () {
        that = this;

        window.addEventListener("load",() => {
            that._init()
        }, false);
    }

    obj.prototype = {
        upload: function (options) {
            that._initByOptions(options);
            that.fileInput.click();
        },
        // 初始化上传框
        _init: function () {
            var ipt = document.createElement("input");
            ipt.style.display = "none";
            ipt.setAttribute("type", "file");
            ipt.addEventListener("change", that._fileChange, false);
            document.body.appendChild(ipt);

            that.fileInput = ipt;
        },

        _initByOptions: function (options) {
            that.fileInput.value = "";
            that.options = {
                multi: false,
                url: "",
                accept: "",
                param: null,
                uploadType:'',
                before: function () {
                },
                after: function () {
                },
                progress: function () {
                }
            };

            if (options) {
                for (var i in options) {
                    that.options[i] = options[i];
                }
            }

            // multiple
            if (that.options.multi) that.fileInput.setAttribute("multiple", "multiple");
            else that.fileInput.removeAttribute("multiple");

            // accept
            that.fileInput.setAttribute("accept", that.options.accept || "");
        },

        _fileChange: function () {
            if (that.options.before) {
                var result = that.options.before(this.files);
                if (result == false) return;
            }

            for (var i = 0; i < this.files.length; i++) {
                that._uploadFile(this.files[i]);
            }
        },

        _uploadFile: function (file) {
            if(that.options.uploadType == 'local'){
                that.options.after && that.options.after(file);
                return;
            }
            var xhr = new XMLHttpRequest();

            xhr.upload.addEventListener("progress", function (evt) {
                if (evt.lengthComputable) {
                    that.options.progress && that.options.progress(evt.loaded / evt.total);
                } else {
                    // No data to calculate on
                }
            }, false);

            xhr.addEventListener("load", function () {

            }, false);

            xhr.open("post", that.options.url);

            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                        that.options.after && that.options.after(xhr.responseText, file);
                        xhr = null;
                    }
                }
            }

            xhr.onerror = function () {
                that.options.error && that.options.error();
            }

            // Send the file (doh)
            if ("getAsBinary" in file) {
                //FF 3.5+
                xhr.sendAsBinary(file.getAsBinary());
            } else {
                var formData = new FormData();
                formData.append("path", "default");
                formData.append("upload_file", file);
                formData.append("type", file.name.substring(file.name.indexOf(".")));

                if (that.options.param) {
                    for (var p in that.options.param) {
                        formData.append(p, that.options.param[p]);
                    }
                }

                if (me.global.token) {
                    xhr.setRequestHeader('token', me.global.token)
                }
                xhr.send(formData);
            }
        }
    }

    return new obj();
})();

3.读取Excel

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function XLSXRender(data, accept, maxSize, callBack, maxCount) {
  File.upload({
    multi: true,
    accept: accept,
    uploadType: "local",
    before: function (files) {},
    after: function (file) {
      var reader = new FileReader();
      reader.onload = function (e) {
        var data = e.target.result;
        var workbook = XLSX.read(data, {type: 'binary'});
        var sheetNames = workbook.SheetNames; // 工作表名称集合
        var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
        callBack && callBack(XLSX.utils.sheet_to_json(worksheet));
      };
      reader.readAsBinaryString(file);
    },
    error: function () {},
    progress: function () {}
  });
}

4.生成echarts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
XLSXRender({}, "image/jpg;image/jpeg;image/png;image/gif;image/bmp;", 500, function (data) {
  if (!data) return;
  var source = [];
  var a = {};
  for(let i in data){
    for(let key in data[i]) {
      if(!a[key])a[key] = [key]
      a[key].push(data[i][key])
    }
  }
  for(let i in a){
    source.push(a[i])
  }
  initData(source)
})
function initData(source){
  const _data = document.getElementById("data");
  const option = {
    legend: {},
    tooltip: {},
    dataset: {
      source: source
    },
    xAxis: {type: 'category'},
    yAxis: {},
    series: [
      {type: 'bar'},
      {type: 'bar'},
      {type: 'bar'}
    ]
  }
  if (!_data) {
    _data.setOption(option)
    return;
  }
  var _data = this.$echarts.init(_data)
  _data.setOption(option)
}

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ExcelToCharts</title>
    <script src="./xlsx.full.min.js"></script>
    <script src="./echarts.common.min.js"></script>
    <script src="./File.js"></script>
</head>
<body>
<button id="readExcel">读取Excel</button>
<div id="data" style="width: 300px;height: 300px;"></div>
<script>
    document.getElementById('readExcel').addEventListener('click', function() {
        XLSXRender({}, "*.xlsx;", 500, function (data) {
            if (!data) return;
            const source = [];
            const a = {};
            for(let i in data){
                for(let key in data[i]) {
                    if(!a[key])a[key] = [key]
                    a[key].push(data[i][key])
                }
            }
            for(let i in a){
                source.push(a[i])
            }
            initData(source)
        })
    })

    function XLSXRender(data, accept, maxSize, callBack, maxCount) {
        File.upload({
            multi: true,
            accept: accept,
            uploadType: "local",
            before: function (files) {},
            after: function (file) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    var data = e.target.result;
                    var workbook = XLSX.read(data, {type: 'binary'});
                    var sheetNames = workbook.SheetNames; // 工作表名称集合
                    var worksheet = workbook.Sheets[sheetNames[0]]; // 这里我们只读取第一张sheet
                    callBack && callBack(XLSX.utils.sheet_to_json(worksheet));
                };
                reader.readAsBinaryString(file);
            },
            error: function () {},
            progress: function () {}
        });
    }

    function initData(source){
        const option = {
            legend: {},
            tooltip: {},
            dataset: {
                source: source
            },
            xAxis: {type: 'category'},
            yAxis: {},
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ]
        }

        let _data = document.getElementById("data");

        if (!_data) {
            _data.setOption(option)
            return;
        }
        _data = echarts.init(_data)

        _data.setOption(option)
    }
</script>
</body>
</html>

最后更新： 2021年12月21日 14:36