麻烦各位有空帮忙看看代码哪里出错了，用echarts画不出来图形，刚接触，还不太熟，控制台又没报错？

站长

2024年07月06日 09:28 · 阅读数 5

请问为什么无法描绘出图形？浏览器控制台里又没有报错，但运行后有没有图形出现，刚接触echarts绘图，搞不懂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/Echarts/echarts-5.4.1/dist/echarts.min.js"></script>
    <script src="../js/jquery/jquery-3.6.3.min.js"></script>
    <title>工位区域分布</title>
</head>
<body>
    <div id='map' style="width: 800px; height: 600px;"></div>
    <?php
        $coon=mysqli_connect("localhost","root","xxxxx","textplain");
        if (!$coon) {
            echo "连接数据库失败";
         }
        //
        $sql2="select userName,workNo,stationNo,secondDivision,thildDivision from stationmap";
        $result2=mysqli_query($coon,$sql2);
        $map_list=mysqli_fetch_all($result2,MYSQLI_ASSOC);
        $maps=array();
        foreach($map_list as $ma){
            $maps[]=array("userName"=>$ma['userName'],"workNum"=>$ma['workNo'],"stationNum"=>$ma['stationNo'],"secondDivision"=>$ma['secondDivision'],"thirdDivision"=>$ma['thildDivision']);
        }
    ?>
    <script>
        var map=<?php echo json_encode($maps);?>;
        // 创建一个 echarts 实例，并指定要绘制的容器
        var myChart = echarts.init(document.getElementById('map'));
        for(var i=0;i < map.length;i++){
            
            var data={
                name:[map[i].userName],//姓名
                workId:[map[i].workNum],//工号
                position:[map[i].stationNum],//工位编号
                firstDivision:[map[i].secondDivision],//部门
                secDivision:[map[i].thirdDivision],//科室
            }
            // 定义一个用于解析工位编号的函数，编号形式例子:M3-2F南-1-1
            function parsePosition(position) {
                var deskCode = position;
                // 拆分工位编号
                var parts = deskCode[0].split('-');
                // 根据不同部分确定位置
                var floor, area, row, col;
                if (parts[1] === '1F南') {
                    floor = 1;
                    area = 'south';
                    col=1;
                } else if (parts[1] === '2F南') {
                    floor = 2;
                    area = 'south';
                    col=2;
                } else if (parts[1] === '1F北'){
                    floor = 1;
                    area = 'north';
                    col=3;
                }else if (parts[1] === '2F北') {
                    floor = 2;
                    area = 'north';
                    col=4;
                }
                row = parseInt(parts[2]);
                col += parseInt(parts[3]);
                // 根据位置计算坐标
                var x, y;
                switch (floor) {
                    case 1:
                        x = 100 + col * 50;
                        y = (area === 'south' ? 100 : 300) + row * 50;
                        break;
                    case 2:
                        x = 400 + col * 50;
                        y = (area === 'south' ? 100 : 300) + row * 50;
                        break;
                }
                return { floor: floor,area: area, x: x, y: y };
            }
             // 定义一个用于生成地图数据的函数
            function generateMapData(data) {
                var mapData = [];
                var item = data;
                var position = parsePosition(data.position);
                var name = item.name;
                var code = item.workId;
                var department = item.firstDivision+item.secDivision;
                var value = [position.x, position.y, i];
                mapData.push({ name: name, code: code, department: department, value: value });
                return mapData;
            }
            var mapData=generateMapData(data);
             // 判断同一个工号是否有两个工位
            // 配置选项
            var option = {
                title: {
                    text: '区域地图',
                    left: 'center'
                },
                tooltip: {
                    formatter: function(params) {
                        // 显示该工位的详细信息
                        var position = params.data.position;
                        var name = params.data.name;
                        var id = params.data.id;
                        var department = params.data.firstDivision+params.data.secDivision;
                        var html = '姓名：' + name + '<br>' +
                                '工号：' + id + '<br>' +
                                '工位编号：' + position + '<br>' +
                                '部门：' + department;
                        return html;
                    }
                },
                grid: {
                    left: 50,
                    top: 50,
                    right: 50,
                    bottom: 50,
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    min: 0,
                    max: 250,
                    show: false
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 550,
                    show: false
                },
                series: [{
                    type: 'scatter',
                    symbolSize: 10,
                    symbol: 'scatter',
                    itemStyle: {
                        color: '#FF0000'
                    },
                    data:mapData
                }]
            };
            // 将配置选项设置给 echarts 实例进行绘制
            myChart.setOption(option);
        }
    </script>
</body>
</html>

1个回答

test

2024-07-06

mapData数据应该是坐标 e.g. [[1,2],[23,22]] 你看看能不能渲染

适合作为回答的

经过验证的有效解决办法
自己的经验指引，对解决问题有帮助
遵循 Markdown 语法排版，代码语义正确

不该作为回答的

询问内容细节或回复楼层
与题目无关的内容
“赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容