单纯的前端JS好像不能实现读取Excel，但是引用SheetJS就能很简单的实现这个功能。
尚未解决的问题

每次运行都要重新选择Excel文件，以后会更新。
Excel中数据

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

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="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 >

<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文件

    var date1=[];
    var date2=[];
    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);
    }

    // 处理excel文件
    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>
使用echarts将Excel的数据可视化

尚未解决的问题

Excel中数据

效果

代码

猜你喜欢
