php使用echarts动态显示折线图堆叠

最新推荐文章于 2022-07-29 15:51:59 发布

灯闵

最新推荐文章于 2022-07-29 15:51:59 发布

阅读量720

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/weixin_40839432/article/details/95963136

版权

php 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

官方示例（静态死数据）
https://echarts.baidu.com/examples/editor.html?c=line-stack

本人制作（动态）
在这里插入图片描述

数据库
在这里插入图片描述

数据库连接部分

<?php
header("pdotent-type:text/json;charset=utf-8");



try 
{
$pdo = new PDO("mysql:host=localhost;port=8806;dbname=phphomework;charset=utf8",'root','');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
}
catch (PDOException $e)
{
print("Error:".$e->getMessage());
die();
}




//查询学生信息
$sql = "SELECT * FROM detail ";
$result = $pdo->query($sql);


//定义变量json存储值
$data="";
$array= array();


class Count2{
    public $id;
    public $name;
    public $year2009;
	public $year2010;
	public $year2011;
	public $year2012;
	public $year2013;
	public $year2014;
	public $year2015;
	public $year2016;
	public $year2017;
	public $year2018;
	public $year2019;
}

while ($row = $result->fetch(PDO::FETCH_ASSOC ))
{
			
    $gz = new Count2();
    $gz->id = $row['id'];
	$gz->name = $row['name'];
    $gz->year2009 = $row['year2009'];
  	$gz->year2010 = $row['year2010'];
	$gz->year2011 = $row['year2011'];
	$gz->year2012 = $row['year2012'];
	$gz->year2013 = $row['year2013'];
	$gz->year2014 = $row['year2014'];
	$gz->year2015 = $row['year2015'];
	$gz->year2016 = $row['year2016'];
	$gz->year2017 = $row['year2017'];
	$gz->year2018 = $row['year2018'];
	$gz->year2019 = $row['year2019'];
	

    //数组赋值
    $array[] = $gz;
}

$data = json_encode($array,JSON_UNESCAPED_UNICODE);
echo $data;


?>

展示部分

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="jquery.js"></script>
</head>
<body >

<center><div id="main" style="width: 800px;height:1000px;"></div></center>

<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));
    var ses=[],nums=[];
    function TestAjax(){
        $.ajax({
            type: "post",
            async: false,
            url: "sql3.php",
            data: {},
            dataType: "json",
            success: function(result) {
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                   	      
                      		nums.push(result[i].year2009)
                        	nums.push(result[i].year2010)
                        	nums.push(result[i].year2011)
                        	nums.push(result[i].year2012)
                        	nums.push(result[i].year2013)
                        	nums.push(result[i].year2014)
                        	nums.push(result[i].year2015)
                        	nums.push(result[i].year2016)
                        	nums.push(result[i].year2017)
                        	nums.push(result[i].year2018)
                        	nums.push(result[i].year2019)
                        	
                   	   		ses.push({
                    		name: result[i].name,
							type:'line',
            				stack: '总量',
                    		data: nums	
               			 });

                          nums=[];
                        
                       // console.log(result[i].num);
                        
                    }
                    //results.push(result);
                    //console.log(results);
                    
             
            }  
            console.log(ses)
        }
      
    })
        return ses;
        ses=[]
}

    TestAjax();
	

	
	
option = {
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['华软要闻','校园快讯','视频华软','图说华软','媒体华软','学科竞赛','华软讲坛','无边湖畔','华软人物']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019']
    },
    yAxis: {
        type: 'value'
    },
    series: ses
    
};


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

灯闵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
php使用echarts动态显示折线图堆叠

官方示例（静态死数据）https://echarts.baidu.com/examples/editor.html?c=line-stack本人制作（动态）数据库数据库连接部分<?phpheader("pdotent-type:text/json;charset=utf-8");try {$pdo = new PDO("mysql:host=localhost;p...
复制链接

扫一扫