BIGEMPA Js API示例中心

数据展示源代码展示

代码编辑区 运行 下载 还原
<!DOCTYPE html>

<html>

<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <!--
        以下CSS地址请在安装软件了替换成本地的地址
        CSS地址请使用:
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.css
        软件下载地址 http://www.bigemap.com/reader/download/detail201802017.html
    -->
    <link href='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.css' rel='stylesheet' />
    <!--
        JS地址请使用:
        http://localhost:9000/bigemap.js/v2.1.0/bigemap.js
    -->
    <script src='http://www.bigemap.com:9000/bigemap.js/v2.1.0/bigemap.js'></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/d3/5.16.0/d3.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        #left {
            position: absolute;
            z-index: 10;
            height: 100%;
            width: 300px;
            background-color: black;
            opacity: .5;
        }

        .d31 {
            position: absolute;
            z-index: 10;
            height: 100%;
            width: 0px;
            background-color: white;
        }

        .d32 {
            position: absolute;
            z-index: 10;
            height: 100%;
            width: 0px;
            background-color: white;
        }

        .toptitle {
            position: absolute;
            z-index: 10;
            height: 72px;
            left: 67px;
            color: white;
        }

        .bottomtitle {
            position: absolute;
            z-index: 10;
            height: 72px;
            top: 313px;
            left: 67px;
            color: white;
        }

        .svg1 {
            border-radius: 50%;
            background-color: white;
            opacity: .8;
        }
    </style>
    <title>Google Map Streets</title>
</head>

<body>
    <div id="left">

        <div class="toptitle">
        </div>
        <div class="bottomtitle">
        </div>

    </div>
    <div class="d31"></div>
    <div class="d32"></div>
    <div id='map'></div>
    <script>
        //软件配置信息地址,软件安装完成之后使用本地地址,如:http://localhost:9000
        BM.Config.HTTP_URL = 'http://www.bigemap.com:9000';
        // 在ID为map的元素中实例化一个地图,并设置地图的ID号为 bigemap.googlemap-streets,ID号程序自动生成,无需手动配置,并设置地图的投影为百度地图 ,中心点,默认的级别和显示级别控件
        var map = BM.map('map', 'bigemap.googlemap-streets', { center: [30, 104], zoom: 4, zoomControl: true });

        //标记数据
        places = [{ "name": "甘肃", "position": [36.03, 103.73] }, { "name": "青海", "position": [36.56, 101.74] }, { "name": "四川", "position": [30.67, 104.06] }, { "name": "河北", "position": [38.03, 114.48] }, { "name": "云南", "position": [25.04, 102.73] }, { "name": "贵州", "position": [26.57, 106.71] }, { "name": "湖北", "position": [30.52, 114.31] }, { "name": "河南", "position": [34.76, 113.65] }, { "name": "山东", "position": [36.65, 117] }, { "name": "江苏", "position": [32.04, 118.78] }, { "name": "安徽", "position": [31.86, 117.27] }, { "name": "浙江", "position": [30.26, 120.19] }, { "name": "江西", "position": [28.68, 115.89] }, { "name": "福建", "position": [26.08, 119.3] }, { "name": "广东", "position": [23.16, 113.23] }, { "name": "湖南", "position": [28.21, 113] }, { "name": "海南", "position": [20.02, 110.35] }, { "name": "辽宁", "position": [41.8, 123.38] }, { "name": "吉林", "position": [43.88, 125.35] }, { "name": "黑龙江", "position": [45.75, 126.63] }, { "name": "山西", "position": [37.87, 112.53] }, { "name": "陕西", "position": [34.27, 108.95] }, { "name": "台湾", "position": [25.03, 121.3] }, { "name": "北京", "position": [39.92, 116.46] }, { "name": "上海", "position": [31.22, 121.48] }, { "name": "重庆", "position": [29.59, 106.54] }, { "name": "天津", "position": [39.13, 117.2] }, { "name": "内蒙古", "position": [40.82, 111.65] }, { "name": "广西", "position": [22.84, 108.33] }, { "name": "西藏", "position": [29.97, 91.11] }, { "name": "宁夏", "position": [38.47, 106.27] }, { "name": "新疆", "position": [43.77, 87.68] }, { "name": "香港", "position": [22.28, 114.17] }, { "name": "澳门", "position": [22.19, 113.54] }];
        var data = []
        var data2 = []
        places.map((v, i) => {
            var marker = BM.marker(v.position).addTo(map)
            if (i == 1) {
                draw(v);

            }
            //标记点击事件
            marker.on('click', function () {
                $('.toptitle').html("<h3>" + v.name + "水果数量饼状图</h3>")
                $('.bottomtitle').html("<h3>" + v.name + "过去7天降水量</h3>")
                data.length = 0
                data2.length = 0
                d3.selectAll('svg').remove()
                var wid = $("#left").css('width')
                if (wid == '0px') {
                    $('#left').animate({ width: 300 }, 500)
                }
                setTimeout(function () {
                    var height = 240
                    var width = 240
                    var svg = d3.select('.d31').append('svg').attr('height', height).attr('width', width).attr('transform', "translate(25,50)").attr('class', 'svg1')
                    var pieg = svg.append('g')
                    var fruit = ['苹果', '香蕉', '梨子', '葡萄', '火龙果']
                    //创建假数据
                    for (let index = 0; index < 5; index++) {
                        num = Math.random() * 100
                        if (num < 20) { num = num + 20 }
                        data.push(num.toFixed(2))
                    }

                    //画饼状图
                    //定义颜色比例尺
                    var colorScale = d3.scaleOrdinal()
                        .domain(d3.range(data.length))
                        .range(d3.schemeCategory10);
                    //处理数据
                    var pie = d3.pie();

                    //新建一个弧形生成器
                    var innerRadius = 0;//内半径
                    var outerRadius = 120;//外半径
                    var arc_generator = d3.arc()
                        .innerRadius(innerRadius)
                        .outerRadius(outerRadius);
                    //将原始数据变成可以绘制饼状图的数据,
                    var pieData = pie(data);
                    //打印出来查看转换后的数据
                    console.log(pieData);
                    //  每一个扇形及其对应的文字建立一个分组<g>
                    gs = pieg.selectAll(".g")
                        .data(pieData)
                        .enter()
                        .append("g")
                        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")//位置信息
                    // 绘制扇形
                    gs.append("path")
                        .attr("d", function (d) {
                            return arc_generator(d);//往弧形生成器中出入数据
                        })
                        .attr("fill", function (d, i) {
                            return colorScale(i);//设置颜色
                        });

                    //绘制饼状图上面的文字信息
                    gs.append("text")
                        .attr("transform", function (d) {//位置设在中心处
                            return "translate(" + arc_generator.centroid(d) + ")";
                        })
                        .attr("text-anchor", "middle")
                        .text(function (d, i) {
                            return d.data;
                        })
                    gs.append("text")
                        .attr("transform", function (d) {//位置设在中心处
                            return "translate(" + arc_generator.centroid(d) + ")";
                        })
                        .attr("text-anchor", "middle")
                        .attr('y', 20)
                        .text(function (d, i) {
                            return fruit[i]
                        })

                    //————+——————————————————————————————————————————————————————————————————————————————————————
                    // 画柱状图
                    //创建假数据
                    for (let index = 0; index < 7; index++) {
                        num = Math.random() * 100
                        if (num < 20) { num = num + 20 }
                        data2.push(num.toFixed(0))
                    }
                    var svg2 = d3.select('.d32').append('svg').attr('height', height).attr('width', width).attr('transform', "translate(25,370)")
                    //x轴数据
                    Xdatas = ['一', '二', '三', '四', '五', '六', '日']
                    //创建x轴比例尺
                    var x = d3.scaleBand().domain(Xdatas).rangeRound([0, width - 50]).padding(0.1);
                    xAsix = d3.axisBottom(x)
                    var g = svg2.append('g')
                    g.append('g').attr('transform', 'translate(25,' + 210 + ')').attr('color', 'snow')
                        .call(xAsix);
                    console.log(data2);
                    //y轴比例尺
                    var y = d3.scaleLinear().domain([0, d3.max(data2)]).rangeRound([(height - 50), 0])
                    yAsix = d3.axisLeft(y)
                    g.append('g').attr('transform', 'translate(25,18)').call(yAsix).attr('color', 'snow');

                    chart = g.selectAll('.bar').data(data2).enter().append('g');
                    //添加矩形
                    chart.append('rect')
                        .attr('x', function (d, i) {
                            return x(Xdatas[i]);
                        })
                        .attr('cursor', 'pointer')
                        .attr('y', function (d) {
                            return y(y.domain()[0]) - 5;
                        })
                        .attr('fill', function (d, i) {
                            // 生成随机颜色
                            return colorScale(i)
                        })
                        .attr('stroke', '#FFF').attr('stroke-width', '3px')
                        .transition()
                        .delay(function (d, i) {
                            return (i + 1) * 50
                        })
                        .duration(2000).ease(d3.easeBounceIn)
                        .attr('y', function (d) {
                            return y(d) - 5;
                        })
                        .attr('width', x.bandwidth())
                        .attr('height', function (d) {
                            return (height - 50) - y(d);
                        }).attr('transform', 'translate(25,25)');
                    //添加文字
                    chart.append('text').attr('fill', '#FFF')
                        .attr('x', function (d, i) {
                            return x(Xdatas[i]);
                        })
                        .attr('y', function (d) {
                            return y(y.domain()[0]);
                        })
                        .transition()
                        .delay(function (d, i) {
                            return (i + 1) * 100
                        })
                        .duration(2000).ease(d3.easeBounceIn)
                        .attr('y', function (d) {
                            return y(d);
                        })
                        .attr('dx', function (d) {
                            return (x.bandwidth()) / 2;
                        })
                        .attr('dy', 20)
                        .text(function (d) {
                            return d
                        }).attr('transform', 'translate(16,-8)');

                }, 100)

            })
        })
        //map点击事件
        map.on('click', function (e) {
            $('.toptitle').html("")
            $('.bottomtitle').html("")
            d3.selectAll('svg').remove()
            $('#left').animate({ width: 0 }, 1000)
        })
        function draw(v) {
            $('.toptitle').html("<h3>" + v.name + "水果数量饼状图</h3>")
            $('.bottomtitle').html("<h3>" + v.name + "过去7天降水量</h3>")
            var height = 240
            var width = 240
            var svg = d3.select('.d31').append('svg').attr('height', height).attr('width', width).attr('transform', "translate(25,50)").attr('class', 'svg1')
            var pieg = svg.append('g')
            var fruit = ['苹果', '香蕉', '梨子', '葡萄', '火龙果']
            //创建假数据
            for (let index = 0; index < 5; index++) {
                num = Math.random() * 100
                if (num < 20) { num = num + 20 }
                data.push(num.toFixed(2))
            }

            //画饼状图
            //定义颜色比例尺
            var colorScale = d3.scaleOrdinal()
                .domain(d3.range(data.length))
                .range(d3.schemeCategory10);
            //处理数据
            var pie = d3.pie();

            //新建一个弧形生成器
            var innerRadius = 0;//内半径
            var outerRadius = 120;//外半径
            var arc_generator = d3.arc()
                .innerRadius(innerRadius)
                .outerRadius(outerRadius);
            //将原始数据变成可以绘制饼状图的数据,
            var pieData = pie(data);
            //打印出来查看转换后的数据
            console.log(pieData);
            //  每一个扇形及其对应的文字建立一个分组<g>
            gs = pieg.selectAll(".g")
                .data(pieData)
                .enter()
                .append("g")
                .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")//位置信息
            // 绘制扇形
            gs.append("path")
                .attr("d", function (d) {
                    return arc_generator(d);//往弧形生成器中出入数据
                })
                .attr("fill", function (d, i) {
                    return colorScale(i);//设置颜色
                });

            //绘制饼状图上面的文字信息
            gs.append("text")
                .attr("transform", function (d) {//位置设在中心处
                    return "translate(" + arc_generator.centroid(d) + ")";
                })
                .attr("text-anchor", "middle")
                .text(function (d, i) {
                    return d.data;
                })
            gs.append("text")
                .attr("transform", function (d) {//位置设在中心处
                    return "translate(" + arc_generator.centroid(d) + ")";
                })
                .attr("text-anchor", "middle")
                .attr('y', 20)
                .text(function (d, i) {
                    return fruit[i]
                })

            //————+——————————————————————————————————————————————————————————————————————————————————————
            // 画柱状图
            //创建假数据
            for (let index = 0; index < 7; index++) {
                num = Math.random() * 100
                if (num < 20) { num = num + 20 }
                data2.push(num.toFixed(0))
            }
            var svg2 = d3.select('.d32').append('svg').attr('height', height).attr('width', width).attr('transform', "translate(25,370)")
            //x轴数据
            Xdatas = ['一', '二', '三', '四', '五', '六', '日']
            //创建x轴比例尺
            var x = d3.scaleBand().domain(Xdatas).rangeRound([0, width - 50]).padding(0.1);
            xAsix = d3.axisBottom(x)
            var g = svg2.append('g')
            g.append('g').attr('transform', 'translate(25,' + 210 + ')').attr('color', 'snow')
                .call(xAsix);
            console.log(data2);
            //y轴比例尺
            var y = d3.scaleLinear().domain([0, d3.max(data2)]).rangeRound([(height - 50), 0])
            yAsix = d3.axisLeft(y)
            g.append('g').attr('transform', 'translate(25,18)').call(yAsix).attr('color', 'snow');

            chart = g.selectAll('.bar').data(data2).enter().append('g');
            //添加矩形
            chart.append('rect')
                .attr('x', function (d, i) {
                    return x(Xdatas[i]);
                })
                .attr('cursor', 'pointer')
                .attr('y', function (d) {
                    return y(y.domain()[0]) - 5;
                })
                .attr('fill', function (d, i) {
                    // 生成随机颜色
                    return colorScale(i)
                })
                .attr('stroke', '#FFF').attr('stroke-width', '3px')
                .transition()
                .delay(function (d, i) {
                    return (i + 1) * 50
                })
                .duration(2000).ease(d3.easeBounceIn)
                .attr('y', function (d) {
                    return y(d) - 5;
                })
                .attr('width', x.bandwidth())
                .attr('height', function (d) {
                    return (height - 50) - y(d);
                }).attr('transform', 'translate(25,25)');
            //添加文字
            chart.append('text').attr('fill', '#FFF')
                .attr('x', function (d, i) {
                    return x(Xdatas[i]);
                })
                .attr('y', function (d) {
                    return y(y.domain()[0]);
                })
                .transition()
                .delay(function (d, i) {
                    return (i + 1) * 100
                })
                .duration(2000).ease(d3.easeBounceIn)
                .attr('y', function (d) {
                    return y(d);
                })
                .attr('dx', function (d) {
                    return (x.bandwidth()) / 2;
                })
                .attr('dy', 20)
                .text(function (d) {
                    return d
                }).attr('transform', 'translate(16,-8)');

        }
    </script>
</body>

</html>