BIGEMPA Js API示例中心

D3 个性展示数据源代码展示

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--
            以下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>
</head>
<style>
    body {
        margin: 0;
        padding: 0;
    }

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

    .pulse-icon {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        background-color: #2f8;
        position: relative;
        box-shadow: 1px 1px 8px 0 rgba(0, 0, 0, 0.75);
    }

    .pulse-icon:after {
        content: "";
        box-shadow: 0 0 6px 2px #2f8;
        animation: pulsate 1s ease-out;
        animation-iteration-count: infinite;
        animation-delay: 1.1s;
        -webkit-border-radius: 100%;
        border-radius: 100%;
        height: 300%;
        width: 300%;
        animation: pulsate 2s infinite;
        position: absolute;
        margin: -100% 0 0 -100%;
    }

    @keyframes pulsate {
        0% {
            transform: scale(0.1, 0.1);
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
        }

        50% {
            opacity: 1;
            -ms-filter: none;
            filter: none;
        }

        100% {
            transform: scale(1.2, 1.2);
            opacity: 0;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            filter: alpha(opacity=0);
        }
    }

    .d3 {
        position: absolute;
        top: 7px;
    }

    .dataname {
        display: flex;
    }

    .dataname h4 {
        flex: 2;
        color: red;
        padding-top: 104px;
        text-align: center;
        padding-right: 33px;
    }



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

    #right {
        position: absolute;
        z-index: 10;
        width: 300px;
        height: 100%;
        background-color: black;
        opacity: .7;
        right: 0px;
        top: 0px;
    }
</style>

<body>
    <div id="map"> </div>
    <div id="left">
        <div class="ld3"></div>
    </div>
    <div style="position: absolute;
    color: white;
    z-index: 99;
    left: 120px;">
        <h4 style="margin-top: 199px;">A数据</h4>
        <h4 class="B" style="margin-top:200px">B数据</h4>
        <h4 class="C" style="margin-top:200px">C数据</h4>
    </div>
    <div id="right">
        <div class="rd3"></div>

    </div>
    <div style="position: absolute;
    color: white;
    z-index: 99;
    right: 120px;">
        <h4 class="D" style="margin-top: 199px;">D数据</h4>
        <h4 class="E" style="margin-top:200px">E数据</h4>
        <h4 class="F" style="margin-top:200px">F数据</h4>
    </div>
</body>
<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 });
    var myIcon = BM.divIcon({ className: 'my-div-icon', html: '<div><span class="pulse-icon"></span></div>' });
    for (let i = 0; i < 15; i++) {
        BM.marker([20 + 20 * Math.random(), 80 + 40 * Math.random()], { icon: myIcon }).addTo(map);
    }

    //定义画布高度 宽度
    var height = 700
    var width = 300
    //定义一个接收定时器的数组
    var interarr = []
    var svg1 = d3.select('.ld3').append('svg').attr('height', height).attr('width', width)
    var svg2 = d3.select('.rd3').append('svg').attr('height', height).attr('width', width)
    //画饼图
    setcircle(svg1, 100, 'c1')
    setcircle(svg1, 320, 'c2')
    setcircle(svg1, 550, 'c3')
    setcircle(svg2, 100, 'c4', true, 1000)
    setcircle(svg2, 320, 'c5', true)
    setcircle(svg2, 550, 'c6', true, 4000)
    //定义标记点击事件
    $('.pulse-icon').on('click', function () {
        interarr.map(d => {
            clearInterval(d)
        })
        d3.selectAll('.circle').remove()

        //画饼图
        setcircle(svg1, 100, 'c1')
        setcircle(svg1, 320, 'c2')
        setcircle(svg1, 550, 'c3')
        setcircle(svg2, 100, 'c4', true, 1000)
        setcircle(svg2, 320, 'c5', true)
        setcircle(svg2, 550, 'c6', true, 4000)


    })
    //--------------------------------------    --------------------------------------------------------------------------

    function setcircle(svgname, down, classname = c1, type = false, time = 2000) {
        //定义画布
        var picture = svgname.append('g').attr('class', 'circle').attr('transform', `translate(150,${down})`)
        //定义饼图生成器
        var arcGenerator = d3.arc().innerRadius(30).outerRadius(80).startAngle(0);
        //背景圆
        var backGround = picture.append("path")
            .datum({ endAngle: 2 * Math.PI })
            .style("fill", "snow")
            .attr("d", arcGenerator);

        //颜色比例尺
        var colorLinear = d3.scaleLinear().domain([0, 100]).range(["#EEE685", "#EE3B3B"])
        var num
        //生产随机数
        setnum()
        function setnum() {
            num = Math.random()
            num = num.toFixed(2) * 100
            if (num % 1 === 0) {
                return num
            } else {
                setnum()
            }
        }
        // console.log(num);
        //生产图形
        var upperGround = picture.append('path')
            .datum({ endAngle: Math.PI * 2 * num / 100 })
            .attr('class', classname)
            .style('fill', '#FFC125')
            .attr('d', arcGenerator)
        //生产文字
        var dataText = picture.append('text')
            .text(num + '%')
            .attr('text-anchor', 'middle')
            .attr('dominant-baseline', 'middle')
            .attr('font-size', '17px')
            .attr('fill', 'white')
        if (type === true) {
            //定时器 定时更新图形
            var aa = setInterval(function () {
                d3.select(`.${classname}`).transition().duration(750).attrTween('d', function (d) {
                    var compute = d3.interpolate(d.endAngle, Math.random() * Math.PI * 2);
                    return function (t) {
                        d.endAngle = compute(t);
                        var data = d.endAngle / Math.PI / 2 * 100;
                        //设置数值
                        dataText.text(data.toFixed(0) + '%');
                        //将新参数传入,生成新的圆弧构造器
                        return arcGenerator(d);
                    }
                }).styleTween('fill', function (d) {
                    return function (t) {
                        var data = d.endAngle / Math.PI / 2 * 100;

                        //返回数值对应的色值
                        return colorLinear(data);
                    }
                })

            }, time)
            //将计时器添加到数组
            interarr.push(aa)
        }
    }

</script>

</html>