使用EChat通过php读取后台数据将其转换为饼状图

最新推荐文章于 2022-03-25 21:56:05 发布

彭祥.

最新推荐文章于 2022-03-25 21:56:05 发布

阅读量745

点赞数 1

本文链接：https://blog.csdn.net/pengxiang1998/article/details/104105951

版权

博主在完成自己的毕业设计时，需要对数据库中的菜品按照种类进行统计销售额，已经使用柱状图完成了，但感觉还不够直观，因此想到可以采用饼状图的方式显示出来，于是使用了EChat的相关插件将其实现出来
以下是运行截图：
在这里插入图片描述

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script src="echarts.min.js"></script>
<script src="jquery-3.4.1.min.js"></script>
<body>
    <div id="chartmain" style="width: 600px; height: 400px;"></div>
</body>
<script type="text/javascript">
    //初始化echarts
    function chushihua(myChart){
        var option = {
            title:{
                text:'鼎食城菜品数据统计'
            },            
            series:[{
                name:'访问量',
                type:'pie', 
                radius:'90%', 
                data:[
                    {value:0,name:'无'},
                ]
            }]
        };

        myChart.setOption(option);   
    }

    //从数据库读取数据赋值给echarts
    function fuzhi(myChart){
        $.ajax({
            contentType : "application/json",
            type : "POST",
            url : "test1.php",
            dataType : "json",
            success : function(data) {
                //创建一个数组，用来装对象传给series.data，因为series.data里面不能直接鞋for循环
                var servicedata=[];

                for(var i=0;i<data.length;i++){
                    var obj=new Object();
                    obj.name=data[i].name; 
                    obj.value=data[i].age;
                    servicedata[i]=obj;
                }

                myChart.setOption({
                    title:{
                    text:'鼎食城菜品销售额统计'
                    },            
                    series:[{
                        name:'销售额',
                        type:'pie', 
                        radius:'65%', 
                        data:servicedata
                    }]
					
                });

            }
        });
    }

    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));
    chushihua(myChart);
    fuzhi(myChart);    

</script>
</html>

码字不易，给个赞呗

彭祥.

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
使用EChat通过php读取后台数据将其转换为饼状图

博主在完成自己的毕业设计时，需要对数据库中的菜品按照种类进行统计销售额，已经使用柱状图完成了，但感觉还不够直观，因此想到可以采用饼状图的方式显示出来，于是使用了EChat的相关插件将其实现出来以下是运行截图：<html><head> <meta http-equiv="Content-Type" content="text/html; charset=...
复制链接

扫一扫