TV.kanbanUI.git

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>世界地图</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/dataCenterGlobal.css">
    <link rel="stylesheet" type="text/css" href="./css/new30.css">
    <script type="text/javascript" src="./js/global.js"></script>
    <style>
        body {
            background: #001123;
        }
 
        .left .shuju_box .shuju {
            width: 121px;
            height: 100px
        }
 
        .left,
        .right {
            top: 320px
        }
    </style>
</head>
 
<body>
 
    <div style="text-align: center;">
        <div class="shuju_box clearfix">
            <div class="shuju shuju1">
                <div class="shuju_cont">
                    <div class="shuju_item">
                        <h2 id="dq"></h2>
                        <p>服务国家和地区</p>
                    </div>
                </div>
            </div>
            <div class="shuju shuju2">
                <div class="shuju_cont">
                    <div class="shuju_item">
                        <h2 class="AllCount" id="AllCount"></h2>
                        <p>全球注册客户(人)</p>
                    </div>
                </div>
            </div>
            <div class="shuju shuju3">
                <div class="shuju_cont">
                    <div class="shuju_item">
                        <h2 class="CurrentMonthReg" id="CurrentMonthReg"></h2>
                        <p>全球新增客户(人)</p>
                    </div>
                </div>
            </div>
            <div class="shuju shuju4">
                <div class="shuju_cont">
                    <div class="shuju_item">
                        <h2 class="CurMonthOrder" id="CurMonthOrder"></h2>
                        <p>全球下单客户(人)</p>
                    </div>
                </div>
            </div>
            <div class="shuju shuju2">
                <div class="shuju_cont">
                    <div class="shuju_item">
                        <h2 class="CurMonthMoney" id="CurMonthMoney"></h2>
                        <p>全球销售额(RMB)</p>
                    </div>
                </div>
            </div>
            <div class="shuju shuju3">
                <div class="shuju_cont">
                    <div class="shuju_item">
                        <h2 class="CurMonthFileCount" id="CurMonthFileCount"></h2>
                        <p>全球文件(款)</p>
                    </div>
                </div>
            </div>
            <div class="shuju shuju4">
                <div class="shuju_cont">
                    <div class="shuju_item">
                        <h2 class="CurMonthArea" id="CurMonthArea"></h2>
                        <p>全球面积(㎡)</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <div class="map2" id="map_1" style="width: 100%;">
 
    </div>
 
    <div id="zzt" class="left" style="width:400px;height: 400px;">
 
        <h2>柱状图存放地方</h2>
 
    </div>
 
 
</body>
 
</html>
 
<script src="js/jquery.min.js"></script>
<script src='js/echarts.min.js'></script>
<script>
    $("#map_1").height($(window).height() - 0);
    window.onload = function () {
        //$(".shuju_box").width($(".shuju").outerWidth(true)*$(".shuju").length)
 
    }
    var countdata;
    var maparry1 = [];
    var maparry2 = [];
    var maparry3 = [];
    var maparry4 = [];
 
 
 
    $.ajax({
        url: "http://localhost:12298/api/loaddata/MapTableData",
        dataType: "JSON",
        async: false,//使用同步的方式,true为异步方式
        type: "Get",
        success: function (data) {
 
            console.log("地图表头数据" + data.data[0][0]["HValue"]);
            $("#dq").html(data.data[0][0]["HValue"] + "+");
            $("#AllCount").html(data.data[0][1]["HValue"]);
            $("#CurrentMonthReg").html(data.data[0][2]["HValue"]);
            $("#CurMonthOrder").html(data.data[0][3]["HValue"]);
            $("#CurMonthMoney").html(data.data[0][4]["HValue"] + "+");
            $("#CurMonthFileCount").html(data.data[0][5]["HValue"]);
            $("#CurMonthArea").html(data.data[0][6]["HValue"]);
 
            countdata = data.data[1];//地图数据
            console.log("地图数据" + countdata);
            // for (var j = 0; j < 3; j++) {
            //     $.each(data.data[1], function (index, val) {
            //         maparry2.push(val.name);
            //         maparry4.push(val.value + Math.random() * 100);
            //     });
            //     maparry1.push(maparry2);//将添加好的name值在填充到数组一里
            //     maparry3.push(maparry4);//将添加好的value值填充到数组里
            //     maparry2 = [];
            //     maparry4 = [];
            // }
            $.each(data.data[1], function (index, val) {
                maparry2.push(val.name);
                maparry4.push(val.value);
 
 
            });
            maparry1.push(maparry2);//将添加好的name值在填充到数组一里
            maparry3.push(maparry4);//将添加好的value值填充到数组里
            // console.log("zhuzhuang" + maparry1);
            // console.log("zhuzhuang2" + maparry3);
 
        },
        error: function (e) {
 
        }
    })
 
 
    var WorldMapData = {
        Init: function () {
            // console.log("INIT" + countdata);
 
            var data = countdata;
 
 
            var option = {
                backgroundColor: 'transparent',
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        if (typeof (params.value)[2] == "undefined") {
                            return params.name + ' : ' + params.value;
                        } else {
                            return params.name + ' : ' + params.value[2];
                        }
                    }
                },
                visualMap: {
                    min: 0,
                    max: 500,
                    realtime: false,
                    calculable: false,
                    color: ['#00E4FF', '#00E4FF', '#ffe4b5']
                },
                series: [{
                    name: '消费金额',
                    type: 'map',
                    mapType: 'world',
                    label: {
                        normal: {
                            show: false,//显示文字
                            textStyle: {
                                fontSize: 10,
                                fontWeight: 'normal',
                                color: 'rgba(255,255,255,0.5)'
                            }
                        },
                        emphasis: {
                            textStyle: {
                                fontSize: 10,
                                fontWeight: 'normal',
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: 'rgba(7,21,57,0.5)',
                            borderColor: '#0177ff',
                        },
                    },
                    roam: true,
                    data: data,
                    symbolSize: function (val) {
                        return val[2] / 15;
                    },
                    nameMap: {
                        'Singapore Rep.': '新加坡',
                        'Dominican Rep.': '多米尼加',
                        'Palestine': '巴勒斯坦',
                        'Bahamas': '巴哈马',
                        'Timor-Leste': '东帝汶',
                        'Afghanistan': '阿富汗',
                        'Guinea-Bissau': '几内亚比绍',
                        "Côte d'Ivoire": '科特迪瓦',
                        'Siachen Glacier': '锡亚琴冰川',
                        "Br. Indian Ocean Ter.": '英属印度洋领土',
                        'Angola': '安哥拉',
                        'Albania': '阿尔巴尼亚',
                        'United Arab Emirates': '阿联酋',
                        'Argentina': '阿根廷',
                        'Armenia': '亚美尼亚',
                        'French Southern and Antarctic Lands': '法属南半球和南极领地',
                        'Australia': '澳大利亚',
                        'Austria': '奥地利',
                        'Azerbaijan': '阿塞拜疆',
                        'Burundi': '布隆迪',
                        'Belgium': '比利时',
                        'Benin': '贝宁',
                        'Burkina Faso': '布基纳法索',
                        'Bangladesh': '孟加拉国',
                        'Bulgaria': '保加利亚',
                        'The Bahamas': '巴哈马',
                        'Bosnia and Herz.': '波斯尼亚和黑塞哥维那',
                        'Belarus': '白俄罗斯',
                        'Belize': '伯利兹',
                        'Bermuda': '百慕大',
                        'Bolivia': '玻利维亚',
                        'Brazil': '巴西',
                        'Brunei': '文莱',
                        'Bhutan': '不丹',
                        'Botswana': '博茨瓦纳',
                        'Central African Republic': '中非',
                        'Canada': '加拿大',
                        'Switzerland': '瑞士',
                        'Chile': '智利',
                        'China': '中国',
                        'Ivory Coast': '象牙海岸',
                        'Cameroon': '喀麦隆',
                        'Democratic Republic of the Congo': '刚果民主共和国',
                        'Congo': '刚果',
                        'Colombia': '哥伦比亚',
                        'Costa Rica': '哥斯达黎加',
                        'Cuba': '古巴',
                        'N. Cyprus': '北塞浦路斯',
                        'Cyprus': '塞浦路斯',
                        'Czech Rep.': '捷克',
                        'Germany': '德国',
                        'Djibouti': '吉布提',
                        'Denmark': '丹麦',
                        'Algeria': '阿尔及利亚',
                        'Ecuador': '厄瓜多尔',
                        'Egypt': '埃及',
                        'Eritrea': '厄立特里亚',
                        'Spain': '西班牙',
                        'Estonia': '爱沙尼亚',
                        'Ethiopia': '埃塞俄比亚',
                        'Finland': '芬兰',
                        'Fiji': '斐济',
                        'Falkland Islands': '福克兰群岛',
                        'France': '法国',
                        'Gabon': '加蓬',
                        'United Kingdom': '英国',
                        'Georgia': '格鲁吉亚',
                        'Ghana': '加纳',
                        'Guinea': '几内亚',
                        'Gambia': '冈比亚',
                        'Guinea Bissau': '几内亚比绍',
                        'Eq. Guinea': '赤道几内亚',
                        'Greece': '希腊',
                        'Greenland': '格陵兰',
                        'Guatemala': '危地马拉',
                        'French Guiana': '法属圭亚那',
                        'Guyana': '圭亚那',
                        'Honduras': '洪都拉斯',
                        'Croatia': '克罗地亚',
                        'Haiti': '海地',
                        'Hungary': '匈牙利',
                        'Indonesia': '印度尼西亚',
                        'India': '印度',
                        'Ireland': '爱尔兰',
                        'Iran': '伊朗',
                        'Iraq': '伊拉克',
                        'Iceland': '冰岛',
                        'Israel': '以色列',
                        'Italy': '意大利',
                        'Jamaica': '牙买加',
                        'Jordan': '约旦',
                        'Japan': '日本',
                        'Kazakhstan': '哈萨克斯坦',
                        'Kenya': '肯尼亚',
                        'Kyrgyzstan': '吉尔吉斯斯坦',
                        'Cambodia': '柬埔寨',
                        'Korea': '韩国',
                        'Kosovo': '科索沃',
                        'Kuwait': '科威特',
                        'Lao PDR': '老挝',
                        'Lebanon': '黎巴嫩',
                        'Liberia': '利比里亚',
                        'Libya': '利比亚',
                        'Sri Lanka': '斯里兰卡',
                        'Lesotho': '莱索托',
                        'Lithuania': '立陶宛',
                        'Luxembourg': '卢森堡',
                        'Latvia': '拉脱维亚',
                        'Morocco': '摩洛哥',
                        'Moldova': '摩尔多瓦',
                        'Madagascar': '马达加斯加',
                        'Mexico': '墨西哥',
                        'Macedonia': '马其顿',
                        'Mali': '马里',
                        'Myanmar': '缅甸',
                        'Montenegro': '黑山',
                        'Mongolia': '蒙古',
                        'Mozambique': '莫桑比克',
                        'Mauritania': '毛里塔尼亚',
                        'Malawi': '马拉维',
                        'Malaysia': '马来西亚',
                        'Namibia': '纳米比亚',
                        'New Caledonia': '新喀里多尼亚',
                        'Niger': '尼日尔',
                        'Nigeria': '尼日利亚',
                        'Nicaragua': '尼加拉瓜',
                        'Netherlands': '荷兰',
                        'Norway': '挪威',
                        'Nepal': '尼泊尔',
                        'New Zealand': '新西兰',
                        'Oman': '阿曼',
                        'Pakistan': '巴基斯坦',
                        'Panama': '巴拿马',
                        'Peru': '秘鲁',
                        'Philippines': '菲律宾',
                        'Papua New Guinea': '巴布亚新几内亚',
                        'Poland': '波兰',
                        'Puerto Rico': '波多黎各',
                        'Dem. Rep. Korea': '朝鲜',
                        'Portugal': '葡萄牙',
                        'Paraguay': '巴拉圭',
                        'Qatar': '卡塔尔',
                        'Romania': '罗马尼亚',
                        'Russia': '俄罗斯',
                        'Rwanda': '卢旺达',
                        'W. Sahara': '西撒哈拉',
                        'Saudi Arabia': '沙特阿拉伯',
                        'Sudan': '苏丹',
                        'South Sudan': '南苏丹',
                        'Senegal': '塞内加尔',
                        'Solomon Is.': '所罗门群岛',
                        'Sierra Leone': '塞拉利昂',
                        'El Salvador': '萨尔瓦多',
                        'Somaliland': '索马里兰',
                        'Somalia': '索马里',
                        'Serbia': '塞尔维亚',
                        'Suriname': '苏里南',
                        'Slovakia': '斯洛伐克',
                        'Slovenia': '斯洛文尼亚',
                        'Sweden': '瑞典',
                        'Swaziland': '斯威士兰',
                        'Syria': '叙利亚',
                        'Chad': '乍得',
                        'Togo': '多哥',
                        'Thailand': '泰国',
                        'Tajikistan': '塔吉克斯坦',
                        'Turkmenistan': '土库曼斯坦',
                        'East Timor': '东帝汶',
                        'Trinidad and Tobago': '特里尼达和多巴哥',
                        'Tunisia': '突尼斯',
                        'Turkey': '土耳其',
                        'Tanzania': '坦桑尼亚',
                        'Uganda': '乌干达',
                        'Ukraine': '乌克兰',
                        'Uruguay': '乌拉圭',
                        "United States of America": '美国',
                        'Uzbekistan': '乌兹别克斯坦',
                        'Venezuela': '委内瑞拉',
                        'Vietnam': '越南',
                        'Vanuatu': '瓦努阿图',
                        'West Bank': '西岸',
                        'Yemen': '也门',
                        'South Africa': '南非',
                        'Zambia': '赞比亚',
                        'Zimbabwe': '津巴布韦',
                        'Comoros': '科摩罗',
                        'United Republic of Tanzania': '坦桑尼亚联合共和国',
                    },
                }
                ]
            };
 
 
 
            $.getJSON('./json/world.json', function (globalJson) {
                echarts.registerMap('world', globalJson);
                // 基于准备好的dom，初始化echarts实例
                var chart = echarts.init(document.getElementById('map_1'));
                // 基于准备好的dom，初始化echarts实例
                // var chart1 = echarts.init(document.getElementById('zzt'));
                chart.setOption({
                    series: [{
                        type: 'map',
                        map: 'world'
                    }]
                });
                chart.setOption(option, true);
            });
 
        }
    }
 
    WorldMapData.Init();
 
 
    $(function () {
 
 
        var mychart1 = echarts.init(document.getElementById('zzt'));
        aa(mychart1);
        //根据窗口的大小变动图表 --- 重点
        window.onresize = function () {
            myChart1.resize();
        }
    })
    function aa(mychart1) {
        console.log(maparry1[0])
        console.log(maparry3[0])
        var data1 = maparry1[0];
        var data2 = maparry3[0];
        option = {
            backgroundColor: '',
            title: {
                text: "国际客户TOP10",
                left: "5%",
                top: "8%",
                textStyle: {
                    color: '#c4f5ff',
                    fontSize: '20',
                    fontWeight: "normal"
                },
            },
            grid: { //图表距离上下左右的距离
                top: '15%',
                bottom: '10%',
                right: '30%',
                left: '5%',
                containLabel: true
            },
            tooltip: { //提示
                trigger: "axis",
            },
            xAxis: {
                type: 'value',
                show: false,
                splitLine: {
                    show: false,
                    lineStyle: {
                        type: 'dashed',
                        color: '#7F9BAE'
                    }
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#7F9BAE'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    color: '#fff',
                    fontSize: 14
                }
            },
            yAxis: {
                type: 'category',
                triggerEvent: true,
                show: true,
                inverse: true, //是否反转
                boundaryGap: true,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#7F9BAE'
                    }
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    interval: 0,
                    color: '#fff',
                    align: 'right',
                    margin: 10,
                    fontSize: 16,
                },
                data: data1,
            },
            series: [{
                name: '',
                type: 'bar',
                barWidth: 10,
                yAxisIndex: 0,
                data: data2,
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        textStyle: {
                            color: '#ffffff',
                            fontSize: '16',
                        }
                    }
                },
                itemStyle: {
                    barBorderRadius: 10,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                        offset: 0,
                        color: 'rgba(67, 211, 244,0.2)'
                    },
                    {
                        offset: 1,
                        color: "rgba(67, 211, 244,1)"
                    }
                    ])
                },
            }]
        };
        mychart1.setOption(option);
    }
 
 
</script>