ECharts绘制数据图表

最新推荐文章于 2023-12-08 09:26:12 发布

swift_life

最新推荐文章于 2023-12-08 09:26:12 发布

阅读量449

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/swift_life/article/details/104553409

版权

php 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用ECharts绘制数据图表，使用php自带的函数将数组转换成json格式（ECharts要求的格式）。ECharts可自己定制需要的图表，并导出为js文件。

<?php
include("conn.php");
session_start();
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT); # 数据库语言出错时可报错
?>

<?php
    if (isset($_SESSION['name'])) {
        # 如果名字存在会话里
        $name = $_SESSION['name'];
    }
    else $name = '002';  # 002是用于调试的用户名

    # 在实验数据库中，找到002并调取他实验一的成绩数据，分数以及测试顺序。升序排列
    $sql_user = "SELECT score,insert_id from experiment_no_1 where name='$name' order by insert_id asc";  

    # 执行数据库查找操作，将结果赋予$query_user
    $query_user = mysqli_query($conn,$sql_user);
    
    # 把所有数据组成的数组结果存入$result_total
    $result_total = mysqli_fetch_all($query_user);

    # 查看该数组数据
    print_r($result_total); echo "<br>"; 

    # 定义一个成绩变量，将数组$result_total的第一列取出
    $score = array_column($result_total, '0');
    
    # 计算$score的数量，调试用
    $c = count($score); echo $c.'<br>';

    # 打印成绩，调试用
    print_r($score); echo "<br>"; 

    # 定义一个实验顺序变量，将数组$result_total的第二列取出
    $id = array_column($result_total, '1');

    # 将成绩变量由数组形式转换成json格式，并将字符串中的数字转换成数字类型
    $score1 = json_encode($score, JSON_NUMERIC_CHECK);
    
    # 打印转码后的成绩，调试用
    echo "$score1".'<br>';

    # 将实验顺序变量由数组形式转换成json格式
    $id1 = json_encode($id, JSON_NUMERIC_CHECK);
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts绘制用户同一实验不同成绩</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 400px;height:400px;left:50%;top:50%;
    transform: translate(-50%,-0%);"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例，具体接口参考官方文档
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '实验一成绩统计'
            },
            tooltip: {},
            legend: {
                data:['score']
            },
            xAxis: {
                data: <?php echo "$id1"; ?>
            },
            yAxis: {},
            series: [{
                name: 'score',
                type: 'line',
                smooth: 0.5,
                data: <?php echo "$score1"; ?>
            }]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

swift_life

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ECharts绘制数据图表

使用ECharts绘制数据图表，使用php自带的函数将数组转换成json格式（ECharts要求的格式）。<?phpinclude("conn.php");session_start();mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT); # 数据库语言出错时可报错?><?php if (...
复制链接

扫一扫

专栏目录