echarts_dataShow
/
content_top_left_3.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/conmon.css">
    <title>数据采集</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .columnar_bottom {
            /* text-align: center; */
            font-size: 14px;
            font-weight: bold;
            color: #000;
            /* margin: 0 auto; */
            position: relative;
            padding-left: 30px;
            bottom: 42px;

        }

        #onloadingImg {
            width: 400px;
            height: 300px;
            margin: -50px auto;
        }

        .unitNum {
            font-size: 12px;
            color: #000;
            position: absolute;
            right: 60%;
            bottom: 55px;
            font-weight: bold;
        }

        #dataShow {
            width: 400px;
            height: 150px;
            font-size: 14px;
            color: #000;
            position: absolute;
            right: 0;
            top: 55px;
        }

        #dataShow div {
            height: 30px;
        }

        /* #container_columnar{
            position: relative;
        } */
        .font_bold_1,
        .font_bold_2 {
            font-weight: bold;
        }

        .number_color1,
        .number_color2,
        .number_color3,
        .number_color4,
        .number_color5 {
            color: #3c6dbc;
            font-size: 14px;
            /* font-weight: bold; */
        }

        .number_color2 {
            color: #fd7400;
        }

        .number_color2,
        .number_color1,
        .number_color4 {
            display: inline-block;
            text-align: center;
            width: 72px;
        }

        .rowTwoInfo {
            padding-left: 14px;
        }

        .rowThreeInfo {
            padding-left: 42px;
        }
    </style>
</head>

<body>
    <!-- 图2 -->
    <div class="imacontent">
        <img src="./image/timg.gif" id="onloadingImg">
    </div>
    <div id="container_columnar">
        <div id="top_pie"></div>
        <div id="dataShow">
            <div> 本月<span class="font_bold_1">首次刻章</span>的单位总数量：<span class="number_color1">11111</span></div>
            <div class="rowTwoInfo">其中，<span class="font_bold_2">工商企业</span>单位数量：<span class="number_color2">111</span>占总数量&nbsp;<span
                    class="number_color3">95%</span></div>
            <div class="rowThreeInfo">其它类型的单位数量：<span class="number_color4">111</span>占总数量&nbsp;<span class="number_color5">5%</span></div>
        </div>
        <div class="unitNum">单位：数量</div>
        <div class="columnar_bottom">图3：本月首次刻章的主体占比(不包含工商企业单位)</div>
    </div>
    <script src="./js/jQuery.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/common.js"></script>
    <script type="text/javascript">

        //请求当月推送总量函数
        var resArr;//后端返回数据数组
        var arrNameArr = [];//各单位集合数组数组
        //请求当月工商推送总量函数
        //初始初调用的路径，以及轮询后调用的路径
        var newUrl = "http://192.168.66.72:8080/chart/repeat";
        currentMonthDataTopTen(newUrl);

        //X秒请求一次数据
        setInterval(function () { currentMonthDataTopTen(newUrl); }, setTimeSlideshow(10000));

        var currentWindowHeight = document.documentElement.clientHeight;
        var currentWindowWidth = document.documentElement.clientWidth;
        console.log(currentWindowHeight);
        console.log(currentWindowWidth);

        document.getElementById("top_pie").style.height = currentWindowHeight * 1.1 + 'px';
        document.getElementById("top_pie").style.width = currentWindowWidth * 0.5 + 'px';
        if (currentWindowWidth < 770) {
            $("#dataShow").css("width", "360px");
        } else {
            $("#dataShow").css("width", "400px");

        }
        // window.onresize = function () {
        //     var currentWindowHeight = document.documentElement.clientHeight;
        //     var currentWindowWidth = document.documentElement.clientWidth;
        //     document.getElementById("top_pie").style.height = currentWindowHeight * 0.9 + 'px';
        //     document.getElementById("top_pie").style.width = currentWindowWidth * 1.2 + 'px';
        // }
        var dom = document.getElementById("top_pie");
        var myChart = echarts.init(dom);
        option = {
            title: {
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                confine: true,//鼠标经过，数据强制显示在div区域内
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                right: '22%',
                top: '25',
                itemSize: 18,
                emphasis: {//触发时
                    iconStyle: {
                        borderColor: "#006bb7"//图形的描边颜色
                    }
                },
                // feature: {
                //     saveAsImage: {
                //         show: true,
                //         title: '下载数据'
                //     }
                // }
            },
            color: ['#f7877f', '#396ab7', '#527cbd', '#6c90c8', '#83a4d2', '#fccc44'],
            // grid: {
            //     top: '0',
            //     left: '20%',
            //     right: '0',
            //     bottom: '0'
            // },
            series: [
                {
                    name: '占比',
                    type: 'pie',
                    radius: '53%',
                    // bottom: '60%',
                    center: ['40%', '47%'],//设置饼图的视图位置，即距离div上下左右的距离
                    label: {
                        normal: {
                            formatter: '{b}: {c}',
                        }
                    },
                    data: [
                        // { name: '企业', value: '46' },
                        { name: '个体', value: '3' },
                        { name: '事业', value: '32' },
                        { name: '党政', value: '26' },
                        { name: '社团', value: '15' },
                        { name: '民办非', value: '5555' },
                        { name: '其它', value: '3' },
                    ]
                }
            ]
        };

        function currentMonthDataTopTen(url) {
            $.ajax({
                type: "post",
                // async: false,
                url: url,
                dataType: "json", //返回数据形式为json
                success: function (res) {
                    //获取企业单位数据
                    var sumData = 0;//总计数量
                    var resqyxkz = 0;//获取企业新刻制数量
                    var otherData = 0;//其它数量
                    console.log(res);
                    if (res && res.type == 'success') {
                        resArr = res.map.sealNewDeliverCompanyTypeCount;
                        for (var i = 0; i < resArr.length; i++) {
                            if (resArr[i].companyType == '企业') {
                                resqyxkz = parseInt(resArr[i].deliverSealCount);
                                continue;
                            }
                            arrNameArr.push({ name: resArr[i].companyType, value: parseInt(resArr[i].deliverSealCount) });
                        };
                        for (var i = 0; i < resArr.length; i++) {
                            sumData += parseInt(resArr[i].deliverSealCount);//本月所有数量
                            otherData += parseInt(resArr[i].deliverSealCount);//其它印章数量
                        };
                        otherData -= resqyxkz;
                        $(".number_color1").text(formatNum(sumData));//总数量渲染
                        $(".number_color2").text(formatNum(resqyxkz));//工商数量
                        $(".number_color3").text((resqyxkz / sumData * 100).toFixed(0) + '%');//工商企业刻制数量占比
                        $(".number_color4").text(formatNum(otherData));//其它数量渲染
                        $(".number_color5").text((otherData / sumData * 100).toFixed(0) + '%');//其它类型数量占比

                        sumData = 0;
                        //按照返回数值进行数组排序
                        function compare(property) {
                            return function (a, b) {
                                var value1 = a[property];
                                var value2 = b[property];
                                return value2 - value1;
                            }
                        }
                        arrNameArr.sort(compare('value'))
                        option.series[0].data = arrNameArr;
                        // 使用刚指定的配置项和数据显示图表。
                        if (option && typeof option === "object") {
                            myChart.setOption(option, true);
                        }
                        //数组清空，为以后请求数组做准备
                        arrNameArr = [];
                        //去掉onloading并显示数据
                        $("#onloadingImg").css('display', 'none');
                        $("#container_columnar").css('display', 'block');
                    }
                }
                // error: function (errorMsg) {
                //     alert("图表5数据加载失败！");
                // }
            });
        }
    </script>
</body>

</html>