php使用echarts动态显示饼图Customized Pie

最新推荐文章于 2021-08-18 16:47:27 发布

灯闵

最新推荐文章于 2021-08-18 16:47:27 发布

阅读量1.2k

点赞数

分类专栏：作业 php 文章标签：数据简单可视化

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

版权

作业同时被 2 个专栏收录

6 篇文章 7 订阅

订阅专栏

php

3 篇文章 0 订阅

订阅专栏

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

本人制作（动态）

在这里插入图片描述

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

数据库连接部分

<?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 count ";
$result = $pdo->query($sql);


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


class Count1{
    public $id;
    public $year;
    public $num;
}

while ($row = $result->fetch(PDO::FETCH_ASSOC ))
{
			
    $gz = new Count1();
    $gz->id = $row['id'];
    $gz->year = $row['year'];
    $gz->num = $row['num'];

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

$data = json_encode($array);
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 bgcolor="#2c343c">

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

<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));
    var ses=[];
    function TestAjax(){
        $.ajax({
            type: "post",
            async: false,
            url: "sql2.php",
            data: {},
            dataType: "json",
            success: function(result) {
                if (result) {
                    for (var i = 0; i < result.length; i++) {
                   	
                   	   		ses.push({
                    		name: result[i].year,
                    		value: result[i].num
               
               			 });
                      
                        
                        console.log(result[i].year);
                        console.log(result[i].num);
                        
                    }
                    //results.push(result);
                    //console.log(results);
                    
             
            }  
        }
      
    })
        return ses;
}

    TestAjax();
	

	
	
option = {
    backgroundColor: '#2c343c',

    title: {
        text: '历年年度新闻数量饼图',
        left: 'center',
        top: 50,
        textStyle: {
            color: '#ded'
        }
    },

    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },

    visualMap: {
        show: false,
        min: 80,
        max: 600,
        inRange: {
            colorLightness: [0, 1]
        }
    },
    series : [
        {
            name:'年度新闻数量',
            type:'pie',
            radius : '90%',
            center: ['50%', '60%'],
            data:
                //{value:nums, name:places},
                ses.sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
            label: {
                normal: {
                    textStyle: {
                        color: 'rgba(0, 245, 255, 0.7)',
                     
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }
    ]
};


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>在这里插入代码片

灯闵

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
php使用echarts动态显示饼图Customized Pie

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

扫一扫

专栏目录