laravel5.5实现下拉菜单点选实时更新数据

laravel5.5实现下拉菜单点选实时更新数据

laravel5.5通过echarts实现画图功能，主要包括3个步骤：1.html设置显示方式；2.引入echarts.js;3.通过js设置图片的展示方式
效果图如下：

一、html设置显示方式

这里只保留了主要代码部分。

.
.
.
<div class="box">
    <div class="box-body">
        <div class="page-header">
            <div class="form-horizontal">
                <div class="control-label col-lg-0">
                </div>
                <div class="col-lg-2">
                    <select id="usernum" class="form-control" onchange="selectOnchang(this)">
                        <option value="201804">2018年4月</option>
                        <option value="201803">2018年3月</option>
                    </select>
                </div>
            </div>
        </div>
        <div id="lineMain" style="height:800px;"></div>
    </div>
</div>
.
.
.

二、引入echarts.js

<script src="/fadmin/js/echarts.js"></script>
<script src="/fadmin/js/china.js"></script>

三、通过js设置图片的展示方式

这里主要分为3个模块：数据获取（getdata）、echarts设置（option)和事件的反应(selectOnchang)。

<script type="text/javascript">
    function getdata(time){
        $.ajax({
            type : "get",
            async : false,
            url : '/admin/monitor/map/mddata/'+time,
            data : {},
            dataType : "json",
            success : function(result) {
                if(result){
                    $.each(result, function(i, item) {
                        names.push(item.prov_id);
                        nums.push(item.user_num/10000);
                    });
                    myBarChart.hideLoading();    //隐藏加载动画
                    myBarChart.setOption({        //加载数据图表
                        xAxis: {
                            data: names
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '人数',
                            data: nums
                        }]
                    });
                }

            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myBarChart.hideLoading();
            }
        })
    }
    function selectOnchang(obj){
        var value = $(obj).val();
        names.splice(0,names.length);//清空之前的数据
        nums.splice(0,nums.length);//清空之前的数据
        // myChart.clear();
        getdata(value);
    }
    var myBarChart = echarts.init(document.getElementById('lineMain'));
    option = {
        color: ['#3398DB'],
        title : {
            text: '各省人数分布'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['人数']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : true,
                //设置字体倾斜
                axisLabel: {
                   interval:0,
                   rotate:40
                },

                data : []
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} 万人'
                }
            }
        ],
        series : [
            {
                name:'人数',
                type:'bar',
                data: [], // y轴的数据，由上个方法中得到的ttls
                markPoint:{
                    data:[
                        {type:'average', name:'平均值'}
                    ]
                }
            }
        ]
    };
    myBarChart.setOption(option,true);
    myBarChart.showLoading();
    var names=[];
    var nums=[];
    $(window).on('load', function () {
        var value = $('#usernum').val();
        getdata(value);
    });
</script>

参考文章

https://blog.csdn.net/qq_26525215/article/details/53271455