echarts 区域地图添加标注

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style>
        html,body{
            background:#060d14; background-color:transparent;
        }
    </style>
</head>
<body>


<script src="js/jquery.min.js"></script>
<script src="js/echarts.js"></script>
<div id="main" style="width: 100%;height:840px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 地图数据
        var uploadedDataURL = "js/广西壮族自治区.json";
        // 标注数据
    var mapData = [
        {'latitude':24.5080777697, 'longitude':109.4743093819 , 'name':'1', 'value':32358260, 'color':'#0394d9'},
        {'latitude':24.4683698180, 'longitude':109.3094042452 , 'name':'2', 'value':32358260, 'color':'#d94d02'},
        {'latitude':25.3051048188, 'longitude':109.3974095441 , 'name':'3', 'value':32358260, 'color':'#b42fd5'},
        {'latitude':22.9996102015, 'longitude':108.4031798089 , 'name':'4', 'value':32358260, 'color':'#0394d9'},
    ]



    $.get(uploadedDataURL, function(geoJson) {

        echarts.registerMap(name, geoJson);

        myChart.setOption(option = {
        //地图配置
             geo: {
                type: 'map',
                roam: true,
                label: {
                    normal: {
                        show: true,
                        color:'#fff'
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: '#0394d9',
                        areaColor: '#161331',
                    },
                    emphasis: {
                        areaColor: '#389BB7',
                        borderWidth: 0
                    }
                },

            },
            series: [{
                type: 'effectScatter',      
                coordinateSystem: 'geo',
                // animation: true,
                rippleEffect: {
                   brushType: 'stroke'
               },
                symbolSize: function (val,params) {
                  return 20;
                },
                data: mapData.map(function (itemOpt) {
                        return {
                            name: itemOpt.name,
                            value: [
                                itemOpt.longitude,
                                itemOpt.latitude,
                                itemOpt.value
                            ],

                            label: {
                                emphasis: {
                                    position: 'right',
                                    show: false
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: itemOpt.color
                                }
                            }
                        };
                })

            }]
        });
    });
    // 地图点击
    myChart.on('click',function(e){
        console.log(e)
        if(e.name == 4){
            parent.markClick()
        }
    })


</script>
</body>
</html>
echarts 区域地图 添加标注

猜你喜欢

echarts 区域地图添加标注
