草生鸣间 2022-02-27 17:27 采纳率: 81.8%
浏览 205

js 内置excel路径使echarts获取数据并生成图表

```html
<!--这是一个网上关于读取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="js/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>
    <div id="main" style="width: 800px;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' });
                handle(workbook);
            };
            reader.readAsBinaryString(file);
        }
        // 处理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);
                        }
                    }
                }
                for (var i = 0; i < datas.length; i++) {
                    var a = datas[i].time * 24;//time为第一列的名字
                    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].sum1;//sum1为第二列的名字
                }
                aaa();
            }

        }

    </script>
    <script type="text/javascript">
        function aaa() {
            var myChart = echarts.init(document.getElementById('main'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                        return [pt[0], '10%'];
                    }
                },
                title: {
                    left: 'center',
                    text: '大数据量面积图',
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date1
                },
                yAxis: {
                    type: 'value',
                },
                dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 100
                }],
                series: [
                    {
                        name: '人流量',
                        type: 'line',
                        smooth: true,
                        symbol: 'none',

                        itemStyle: {
                            color: 'rgb(255, 70, 131)'
                        },
                        data: date2
                    }
                ]
            };
            myChart.setOption(option);
        }

    </script>
</body>

</html>

这是excel里面的数据

img

该方法是通过input选择excel文件最终生成echarts的,
但是我想把excel文件路径直接写在代码里面,
然后直接生成echarts图表,不需要通过input导入,该怎么写呢?
  • 写回答

2条回答 默认 最新

  • _念_ 2022-02-27 17:41
    关注

    如果你是想读取用户电脑上的 那么很遗憾不能 如果是放到项目里面的话 相对路径或者绝对路径都可以

    评论

报告相同问题?

问题事件

  • 创建了问题 2月27日

悬赏问题

  • ¥15 防火墙的混合模式配置
  • ¥15 Ubuntu不小心注销了要怎么恢复啊
  • ¥15 win10电脑安装完plcsim advanced4.0运行时为什么会提示找不到虚拟网卡
  • ¥15 安装powerbuilder10卡在安装程序正在运行这个页面 没有下一步任何指令
  • ¥15 关于mpi的问题:请问遇到这种情况需要怎么解决,出现这个问题后电脑不能进行mpi多核运行只能进行单核运行
  • ¥50 微信聊天记录备份到电脑提示成功了,但还是没同步到电脑微信
  • ¥15 python怎么在已有视频文件后添加新帧
  • ¥20 虚幻UE引擎如何让多个同一个蓝图的NPC执行一样的动画,
  • ¥15 fluent里模拟降膜反应的UDF编写
  • ¥15 MYSQL 多表拼接link