Layuiadmin+Echarts全国地图数据分布

Layuiadmin+Echarts全国地图数据分布

*样式要引用layui的css js

Html代码

            <div class="layui-col-sm8">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-sm12">
                        <div class="layui-card">
                            <div class="layui-card-header">全国分布</div>
                            <div class="layui-card-body">

                                <div class="layui-row layui-col-space15">
                                    <div class="layui-col-sm8" style="margin-left: 20%">
                                        <div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-pagethree">
                                            <div carousel-item id="LAY-index-pagethree">
                                                <div><i class="layui-icon layui-icon-loading1 layadmin-loading"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

js代码

    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index',"carousel", "echarts"],function () {
    //请求需要展示的数据
        $.ajax({
            type: 'POST',
            url: '/api/admin/xxx/xxxx',
            success: function (data) {
                // console.log(data);
                //---地图代码---
                var e = layui.$, a = (layui.carousel, layui.echarts), l = [],
                    t = [{
                        title: {text: "", subtext: ""},
                        tooltip: {trigger: "item"},
                        dataRange: {orient: "horizontal", min: 0, max: 6e4, text: ["高", "低"], splitNumber: 0},
                        series: [{
                            name: "全国分布",
                            type: "map",
                            mapType: "china",
                            selectedMode: "multiple",
                            itemStyle: {normal: {label: {show: !0}}, emphasis: {label: {show: !0}}},
                            data: data.data  //通过ajax请求的数据 后台要按照格式要求返回才可以直接用
                            // 完整格式
                            /*[{name: "西藏", value: 60}, {name: "青海", value: 167}, {name: "宁夏", value: 210}, {
                        name: "海南",
                        value: 252
                    }, {name: "甘肃", value: 502}, {name: "贵州", value: 570}, {name: "新疆", value: 661}, {
                        name: "云南",
                        value: 8890
                    }, {name: "重庆", value: 10010}, {name: "吉林", value: 5056}, {name: "山西", value: 2123}, {
                        name: "天津",
                        value: 9130
                    }, {name: "江西", value: 10170}, {name: "广西", value: 99999}, {name: "陕西", value: 9251}, {
                        name: "黑龙江",
                        value: 5125
                    }, {name: "内蒙古", value: 1435}, {name: "安徽", value: 9530}, {name: "北京", value: 51919}, {
                        name: "福建",
                        value: 3756
                    }, {name: "上海", value: 59190}, {name: "湖北", value: 37109}, {name: "湖南", value: 8966}, {
                        name: "四川",
                        value: 31020
                    }, {name: "辽宁", value: 7222}, {name: "河北", value: 3451}, {name: "河南", value: 9693}, {
                        name: "浙江",
                        value: 62310
                    }, {name: "山东", value: 39231}, {name: "江苏", value: 35911}, {name: "广东", value: 999999}]*/
                        }]
                    }], i = e("#LAY-index-pagethree").children("div"), n = function (e) {
                        l[e] = a.init(i[e], layui.echartsTheme), l[e].setOption(t[e]), window.onresize = l[e].resize
                    };
                i[0] && n(0)
                //---/地图代码---
            },
            dataType: "json",
        });


    });

PHP代码（本人用的Laravel 分组查询统计sql 格式返回可以直接使用）

    public function student_map()
    {
        return DB::table('xxx_student')
            ->select('student_province as name', DB::raw('count(*) as value'))
            ->groupBy('student_province')
            ->get()->toArray();
    }

*有一个坑就是要把地图 css 的 display 打开
<style> .layui-carousel>[carousel-item]>* { display: block; } </style>
要不然显示不出来地图 也不知道怎么回事儿

注：数据库的省份名称一定要跟地图的名称一样，不要加 省 字