layui+Ajax+echarts+php实现数据可视化

最新推荐文章于 2023-11-06 08:39:05 发布

暴躁的key_LCL

最新推荐文章于 2023-11-06 08:39:05 发布

阅读量2.2k

点赞数 4

文章标签：可视化 jquery js ajax php

本文链接：https://blog.csdn.net/lcl_key/article/details/106974215

版权

初来乍到

最近做了一个小课设；记录一下历程
先看一下效果：
用layui+echarts写的销量可视化

数据库的商品编码

商品编码
数据库的商品命名规则：1-4位代表商品的大类，5-6位代表商品的种类，7-8某个商品，图片中没有显示的9-12位是流水号

前端部分

因为条件的内容是比较规律的；所以我的命名也是比较规律的
分类命名规则：category0-3
radio日期命名规则：func0-2
input 日期命名规则：date0-2

选择日期之后的显示与隐藏

 //选择日期之后的显示与隐藏
        function cradio(func,ele1,ele2){
            var x=document.getElementsByName(func);  //获取所有name=func的元素
            for(var i=0;i<x.length;i++){ //对所有结果进行遍历，如果状态是被选中的，则将其选择取消
                if (x[i].checked==true)
                {
                    $("#"+ele1+i).removeClass("layui-hide")
                    if(func=='classify'){
                        if(i==0){
                            select_data('categories_table', ele2+i,'goods_classify','ID','all')
                        }else if(i==1){
                            select_data('categories_table', ele2+i,'goods_classify','ID','big')
                        }else if(i==2){
                            select_data('categories_table', ele2+i,'goods_classify','ID','small')
                        }
                    }
                }else{
                    $("#"+ele1+i).addClass("layui-hide")
                    $("#"+ele2+i).val("")
                }

            }
            //重渲染
            layui.use("form", function () {
                var form = layui.form;
                form.render();
            })
        }

下拉框数据绑定


//下拉框数据绑定->数据表名，下拉列表元素，option的title，option的value
function select_data(table,ele,col_name,col_id,condition){
    console.log(ele);
    layui.use('form', function() {
        $("#"+ele).empty();
        var form = layui.form;
        //单个下拉框绑定数据库
        $.ajax({
            type: "POST",
            url: "../../php/sell/select_data.php?table="+table,
            dataType: 'json',
            data: {
                condition:condition
            },
            success: function (data, status) {
                console.log(data);
                var list_data = data.data;
                console.log(data.data)
                $("#"+ele).append(new Option("可以搜索" ,''));
                for (var i = 0; i < list_data.length; i++) {
                    $("#"+ele).append(new Option( list_data[i][col_name],list_data[i][col_id]));
                }
                form.render();//菜单渲染 把内容加载进去
            }
        });
    })
}

数据请求，填充至柱状图

 $.ajax({
                    type: "POST",
                    url: '../../php/sell/sales_analysis.php',
                    dataType: 'json',
                    data: {
                        classify: classify,
                        category: category,
                        get_Func: get_Func,
                        date: date
                    },
                    success: function (data, status) {
                        console.log(data);
                        if(data.msg!=""){
                            alert(data.msg)
                        }
                        var x=data.data["x"];
                        var y=data.data["y"];

                        //柱状图
                        var myChart = echarts.init(document.getElementById('main'));
                        function fetchData(cb) {
                                cb({
                                    categories: x,
                                    data: y
                                });
                        }
                        // 初始 option
                        option = {
                            title: {
                                text: ''    //title
                            },
                            tooltip: {},
                            legend: {
                                data:['销量']
                            },
                            xAxis: {
                                axisLabel:{
                                    interval:0,
                                    rotate:40   //X轴角度旋转
                                },
                                data: []
                            },
                            yAxis: {},
                            series: [{
                                name: '销量',
                                type: 'bar',
                                data: []
                            }]
                        };

                        fetchData(function (data) {
                            myChart.setOption(option)
                            myChart.setOption({
                                xAxis: {
                                    data: data.categories
                                },
                                series: [{
                                    // 根据名字对应到相应的系列
                                    name: '销量',
                                    data: data.data
                                }]
                            });
                        });
                    }
                });