统计组合图：实例三

最新推荐文章于 2024-03-14 18:21:19 发布
最新推荐文章于 2024-03-14 18:21:19 发布
阅读量211 收藏
点赞数
分类专栏： PHP JS HTML
懒虫
本文链接：https://blog.csdn.net/xcbzsy/article/details/104388859
版权
PHP 同时被 3 个专栏收录
106 篇文章 1 订阅
订阅专栏
JS
63 篇文章 1 订阅
订阅专栏
HTML
54 篇文章 1 订阅
订阅专栏

在这里插入图片描述

index.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图界面</title>
    <link rel="stylesheet" href="./eslydsj/js/bstable/css/bootstrap.min.css">
    <link rel="stylesheet" href="./eslydsj/js/jQueryPage/src/jquery.page.css">
    <link rel="stylesheet" href="./eslydsj/css/base.css">
    {{--<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>--}}
    {{--<script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>--}}
    <script type="text/javascript" src="./vendor/echarts-china-map/js/jquery.min.js"></script>
    <script type="text/javascript" src="./vendor/echarts-china-map/js/echarts-4.2.0-rc.min.js"></script>
    <script type="text/javascript" src="./vendor/echarts-china-map/js/map/china.js"></script>
    <script type="text/javascript" src="./js/web/china-map.js"></script>
    <style>
        #china-map {
            width: 100%;
            height: 93vh;
        }
        .order_list{
            margin: 10px;
            color: #FFF;
        }
        .order_list td{
            font-size: 2rem;
            line-height: 40px;
        }
        .order_list td:first-child{
            color: #17ccde;
        }
        .order_1{color: #00e765;text-align: right}
        .order_2{color: #07A3AD;text-align: right}
        .col-md-3{padding:0 5px 0 0; }

        .chejian{
            border: none;
            background: none;
            color: #FFF;
            padding-left: 0;
            font-size: 1.5rem;
        }
    </style>
</head>
<body>
<!--顶部-->
<header class="header left">
    <div class="left nav">
        <ul>

        </ul>
    </div>
    <div class="header_center left">
        <h2><strong class="all_base">全国</strong><strong>-</strong><strong class="all_factory">全工厂</strong><strong>员工分布</strong></h2>
        {{--<p class="color_font"><small>Comprehensive service platform for smart tourism</small></p>--}}
    </div>
    <div class="right nav text_right">

    </div>

</header>
<!--内容部分-->
<div class="map_con left" id="car_control" >
    <!--左侧地图-->
    <div class="left map_left" >
        {{--<button id="back">返回全国</button>--}}
        <div style="z-index: 999;width:30%;position: absolute;top: 10%;left: 1%;">
            <div class="row">
                <div class="form-group">
                    <div class="col-md-3" style="width: 105px">
                        <div id="back" class="form-control btn btn-default" style="display: none"><i class="glyphicon glyphicon-chevron-left"></i> 返回</div>
                    </div>
                    <div class="col-md-3">
                        <select name="provincesList" id="provincesList" class="form-control" >
                            <option value="0">全国</option>
                            @foreach($area as $k => $v)
                                <option value="{{ $k }}">{{ $v }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select name="factoryList" id="factoryList" class="form-control">
                            <option value="0">全工厂</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row" style="margin-top: 10px">
                <div class="col-md-3">
                    <div class="col-md-2" style="padding: 0"><input type="checkbox" name="chefeng" value="1" class="chefeng form-control"></div>
                    <div class="col-md-10"><span class="form-control chejian">车缝车间</span></div>
                </div>
            </div>
            <div class="row" style="margin-top: 10px">
                <div class="col-md-3">
                    <div class="col-md-2" style="padding: 0"><input type="checkbox" name="houzheng" value="1" class="houzheng form-control"></div>
                    <div class="col-md-10"><span class="form-control chejian">后整车间</span></div>
                </div>
            </div>
            <div class="row" style="margin-top: 10px">
                <div class="col-md-3">
                    <div class="col-md-2" style="padding: 0"><input type="checkbox" name="caijian" value="1" class="caijian form-control"></div>
                    <div class="col-md-10"><span class="form-control chejian">裁剪车间</span></div>
                </div>
            </div>
        </div>

        <div id="china-map" ></div>
    </div>
    <!--右侧功能栏-->
    <div class="right map_right">
        <div class="map_con" style="height: 93vh;">
            <div class="order_list">
                <div class="person_list">
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var initLevel = 1;
    var initpName = 'china';
    var initChinese_ = '';
    var initCode = '';
    var initKey = 0;
    var cfStatus,hzStatus,cjStatus = false;


    var myChart = echarts.init(document.getElementById('china-map'));
    initEcharts("china", "中国",1);

    var mapFeatures = echarts.getMap(initpName).geoJson.features;
    myChart.hideLoading();
    var geoCoordMap = {};
    mapFeatures.forEach(function(v) {
        // 地区名称
        var name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp;
    });

    // 初始化echarts
    function initEcharts(pName, Chinese_, type) {
        var provincesKey = $('#provincesList').val()
        var factoryKey = $('#factoryList').val()
        var data = {
            provincesKey: provincesKey,
            factoryKey: factoryKey,
            cfStatus: cfStatus,
            hzStatus: hzStatus,
            cjStatus: cjStatus,
            type:type,
            proCode:initCode,
        };
        $.ajax({
            url:'{{ route('getMapsList') }}',
            data:data,
            type:'GET',
            success:function(data) {
                tmpSeriesData = data
                initPerson(tmpSeriesData)
                var option = {
                    tooltip: {
                        show: true,
                        formatter: function(params) {
                            if (params.data) return params.name + '：' + params.data['value'] + '人'
                        },
                    },
                    visualMap: {
                        type: 'continuous',
                        text: ['', ''],
                        showLabel: true,
                        left: '50',
                        min: 0,
                        max: 100,
                        inRange: {
                            color: [ '#ffffff', '#af8e81', '#c19c80', '#d99282', ]
                        },
                        splitNumber: 0
                    },
                    geo: {
                        show: true,
                        name: Chinese_ || pName,
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#031525',
                                borderColor: '#3B5077',
                            },
                            emphasis: {
                                areaColor: '#2B91B7',
                            }
                        }
                    },
                    series: [
                        {
                            name: Chinese_ || pName,
                            type: 'map',
                            mapType: pName,
                            roam: false,//是否开启鼠标缩放和平移漫游
                            data: tmpSeriesData,
                            zoom:1.2,
                            selectedMode: false,//是否允许选中多个区域
                            label: {
                                normal: {
                                    show: true,
                                    formatter:function(val){
                                        if(val.value > 0){
                                            var area_content =  '{a|' + val.name + '}' + '-' + '{b|' + val.value + '}';
                                            return area_content.split("-").join("\n");
                                        }
                                    },//让series 中的文字进行换行
                                    rich: {
                                        a: {
                                            color: '#1b99cd',
                                            fontSize: 14,
                                            fontWeight:'bold',
                                            width: 16,
                                            height: 16,
                                        },
                                        b: {
                                            color: '#8d003b',
                                            fontFamily: 'Microsoft YaHei',
                                            fontSize: 14,
                                            width: 16,
                                            height: 16,
                                            textAlign: 'center',
                                            padding: 2,
                                        }
                                    },//富文本样式,就是上面的formatter中'{a|'和'{b|'
                                },
                            },//地图中文字内容及样式控制
                            itemStyle: {
                                normal: {
                                    borderWidth: .1,//区域边框宽度
                                    borderColor: '#0550c3',//区域边框颜色
                                    areaColor:"#4ea397",//区域颜色

                                },
                                emphasis: {
                                    borderWidth: .1,
                                    borderColor: '#4b0082',
                                    areaColor:"#ece39e",
                                }
                            },
                        },
                    ]
                };
                myChart.setOption(option);
                myChart.off("click");
                if (pName === "china") { // 全国时，添加click 进入省级
                    myChart.on('click', function (param) {
                        // 遍历取到provincesText 中的下标  去拿到对应的省js
                        for (var i = 0; i < provincesText.length; i++) {
                            if (param.name === provincesText[i]) {
                                initKey = i;
                                //显示对应省份的方法
                                initLevel = 2;
                                initpName = provinces[i];
                                initChinese_ = provincesText[i];
                                initCode = provincesCode[i];
                                showProvince(initpName, initChinese_,2, initCode);
                                break;
                            }
                        }
                        if (param.componentType === 'series') {
                            var provinceName =param.name;
                            $('#box').css('display','block');
                            $("#box-title").html(provinceName);
                        }
                    });
                }else{
                    $('#back').show();
                }
                // else {
                //     // 省份，添加双击 回退到全国
                //     myChart.on('dblclick', function(params) {
                //         initLevel = 1
                //         goInitEcharts();
                //         //显示对应省份的方法
                //
                //     });
                // }
            }
        });
    }
    // 展示对应的省
    function showProvince(pName, Chinese_,type,proCode) {
        initLevel = 2;
        initpName = pName;
        initChinese_ = Chinese_;
        //这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
        loadBdScript('$' + pName + 'JS', './vendor/echarts-china-map/js/map/province/' + pName + '.js', function () {
            initEcharts(Chinese_,pName,type,proCode);
        });
    }
    // 加载对应的JS
    function loadBdScript(scriptId, url, callback) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        if (script.readyState) {  //IE
            script.onreadystatechange = function () {
                if (script.readyState === "loaded" || script.readyState === "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {  // Others
            script.onload = function () {
                callback();
            };
        }
        script.src = url;
        script.id = scriptId;
        document.getElementsByTagName("head")[0].appendChild(script);
    };

    // 加载省份下拉内容
    $('#provincesList').on('change',function () {
        var all_base = $(this).find('option:selected').text();
        $('.all_base').html(all_base);
        $('.all_factory').html('全工厂');

        $('#factoryList').empty()
        var data = {
            key:$(this).val()
        };
        $.ajax({
            url:'{{ route('getBaseFactory') }}',
            data:data,
            type:'GET',
            success:function(data) {
                var option = "<option value='0'>全工厂</option>";
                for (var i=0; i < data.length; i++){
                    option += "<option value='"+ data[i]['id'] +"'>"+ data[i]['name'] +"</option>";
                }
                $('#factoryList').append(option)
                goInitEcharts();
            }
        });
    })
    $('#factoryList').on('change',function () {
        var factory = $(this).find('option:selected').text();
        $('.all_factory').html(factory);
        goInitEcharts();
    })

    $('#highDepartid').on('change',function () {
        goInitEcharts();
    })
    $('.chefeng').on('change',function () {
        cfStatus = $(this).prop("checked")
        goInitEcharts();
    })
    $('.houzheng').on('change',function () {
        hzStatus = $(this).prop("checked")
        goInitEcharts();
    })
    $('.caijian').on('change',function () {
        cjStatus = $(this).prop("checked")
        goInitEcharts();
    })

    function goInitEcharts(){
        if(initLevel==1){
            initpName = 'china';
            initChinese_ = '';
            initCode = '';
            initKey = 0;
            initLevel =1;
            //返回全国地图
            initEcharts("china", "中国", 1);
        }else{
            showProvince(initpName, initChinese_)
        }
    }
    $('#back').on('click',function () {
        $('#back').hide();
        initpName = 'china';
        initChinese_ = '';
        initCode = '';
        initKey = 0;
        initLevel =1;
        initEcharts("china", "中国", 1);
    });
    //填充明细
    function initPerson(data){
        $('.person_list').empty();
        var html = '';
        var countTotal = 0;
        for(var i=0; i<data.length; i++){
            if(data[i]['value'] > 0){
                html += '<div class="col-md-12" style="padding: 0;font-size: 2rem;line-height: 2.8rem;"><div class="col-md-7" style="padding: 0">'+data[i]['name']+':</div><div class="col-md-5 order_1" style="padding-left: 0;font-size: 2.5rem;font-weight: bold;">'+data[i]['value']+'人</div></div >';
            }
            countTotal += data[i]['value'];
        }
        html += '<div class="col-md-12" style="margin-top: 20px;padding: 0;font-size: 2rem;line-height: 2.8rem;"><div class="col-md-7" style="padding: 0">在职总人数:</div><div class="col-md-5 order_1" style="padding-left: 0;font-size: 2.5rem;font-weight: bold;">'+countTotal+'人</div></div >';
        $('.person_list').append(html);
    }

</script>
</body>
</html>
新老农
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
统计图表demo实例
08-20
统计图表demo实例、折线图、饼图、柱状图；兼容各大浏览器，是否美观；
统计组合图：实例一
懒虫的博客
02-19 473
index.blade.php <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo...
统计组合图：实例二
懒虫的博客
02-19 230
index.blade.php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>融裕行计划订单平衡概览</title> <link rel="stylesheet" href="./eslydsj/css...
Python | Bootstrap图介绍
最新发布
python收藏家的博客
03-14 914
在进入Bootstrap 图之前，让我们先了解一下Bootstrap（或Bootstrap 抽样）是什么。（Bootstrap Sampling）：这是一种方法，我们从一个数据集中重复地取一个样本数据来估计一个总体参数。它用于确定总体的各种参数。
flask+bootstrap实现dashboard中的统计图表
我的邮箱26huitailang@gmail.com
10-22 5775
就是在dashboard首页有个图表统计直观展示一些数据，本例用的是用户的角色及统计。 图上信息可以看到，用户100个，四种角色以及角色的人数和占比，以此类推可以统计一些其他的信息。以下我尝试简单的阐述一下实现：文件结构 这里只是蓝图的结构，主要用到的是views.py视图函数，models.py定义Dashboard类，提供一些查询方法，以及模板文件dashboard.html。views.p
js封装成插件_Canvas统计图插件编写实例
12-12
在JavaScript中，封装一个Canvas统计图插件是一个高效的方法，以创建可复用且高度定制化的图表组件。本文将详细讲解如何实现这个插件，并探讨其中的关键知识点。 首先，插件的核心是`ChartDraws`函数，它接受一个`...
C#实现排列组合算法完整实例
09-04
在C#编程中，排列组合算法是解决许多数学和计算机科学问题的基础，特别是在处理数据排序、统计计算以及算法设计时。本实例详细介绍了如何利用C#实现这两种基本的算法：排列（Permutation）和组合（Combination）。...
MATLAB统计分析与应用： Copula理论及应用实例
06-08
简单来说，Copula使得我们能够独立地处理各个变量的边际分布，然后通过Copula函数将它们组合起来形成一个完整的联合分布。 在MATLAB中，我们可以使用`copularnd`函数来生成基于特定Copula类型的随机样本。例如，...
hightChat 统计图的实例，API
05-26
4. **组合图表**：在同一图表中，可以混合使用多种图表类型，如柱状图和折线图的组合。 综上所述，HighChat 是一个功能强大的统计图表库，能够满足各种数据可视化需求。通过深入理解和实践提供的 API，你能够创建出...
c语言实现词频统计的简单实例
09-01
在本篇"C语言实现词频统计的简单实例"中，我们将探讨如何使用C语言来统计一个英文文章中各个单词的出现频率。这个程序的主要目的是读取一个文本文件，然后输出文件中各单词的频率，同时忽略标点符号，并按照频率从高...
Bootstrap统计图后台管理模板
11-29
Bootstrap响应式销售统计后台管理模板
Bootstrop统计图表插件Chart.js简单使用
南窗寄傲琴书消忧的博客
02-27 6324
Bootstrop统计图表插件Chart.js的介绍以及简单使用方式在项目中关于数据方面难免要生成报表，曲线图，柱状图，蛛网图等一些图表以便于观察数据走势，在做相应网站的时候肯定会用到，学习记录！ 准备 Chart.js或者是Chart.bundle.js 如果考虑浏览器兼容还需下载 excanvas.js 下载地址 https://github.com/nnnick/Chart.js chart.
Bootstrap方法详解——技术与实例
热门推荐
白马负金羁
11-17 8万+
一、Introduction 如果说到Bootstrap你会想到什么？是Twitter推出的那个用于前端开发的开源工具包吗？Unfortunately，本文要讨论的并非是Bootstrap工具包，而是统计学习中一种重采样（Resampling）技术。这种看似简单的方法，对后来的很多技术都产生了深远的影响。机器学习中的Bagging，AdaBoost等方法其实都蕴含了Bootstrap的思想...
Echarts地图高级开发：带地级市链接的解决方案(2)
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
09-09 577
设置需要链接的城市名称对象数组 //01.省市需要添加链接的城市.按格式复制; var provinceData = [ {"cityName": "宁波市"}, {"cityName": "台州市"}, {"cityName": "呼伦贝尔市"} ]; 进入对应的城市后，添加myChart.on(“click”, function (params) {｝事件。 if (pName === "china") { // 全国
基于Echarts实现大屏数据可视化物虚拟数据统计
HTML网页设计
08-15 1万+
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ ...
Bootstrap-table分页+汇总统计
qq_37641182的博客
08-03 9731
特别说明 使用Bootstrap-table分页和汇总统计！ 我是自己模拟的JSON数据，用data接收，如果是从后台url接口拿的的数据请用url接受 设置bootstrapTable的js中 showFooter:true，这样才能显示表格底部汇总栏 在columns加入: footerFormatter 属性即可 JSON数据格式 { "total": 11, "rows"...
echarts点击地图进入下一级省市(外加返回上一级代码)
Ych_cxy的博客
06-02 3627
<template> <div class="box"> <div class="left"> <div ref="map" style="width: 100%;height: 95%;position: absolute;left: 0;top: 5%;"></div> </div> <button class="right" @click="cancel">
统计学中的Bootstrap方法介绍及其应用
芳樽里的歌的博客
01-25 7万+
简要介绍了统计学中的Bootstrap方法及其在时间序列相关检验中的应用。
Zabbix配置监控与聚合图形：实例代码详解
"Zabbix配置监控项及聚合图形的实例代码" Zabbix是一款强大的网络监控系统，能够实时监测服务器、网络设备以及各种应用程序的状态。在本文中，我们将深入探讨如何配置Zabbix Agent来监控本地主机，并创建聚合图形，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值