echarts 炫酷北京地图

程序员文章站 2022-05-26 12:09:18

...

代码如下

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/echarts.js"></script>

<body>
    <div id="box" style="width: 700px;height: 700px;margin: 0 auto;"></div>
</body>

<script type="text/javascript">
    $(function() {
        var chart = echarts.init(document.getElementById("box"));
        $.getJSON('json/beijing.json', function(data) {
            echarts.registerMap('beijing', data);
            chart.setOption({
                series : {
                    type : 'map',
                    map : 'beijing',
                    layoutCenter : [ '50%', '50%' ],
                    layoutSize : '100%',
                    label : {
                        normal : {
                            show : true,
                            textStyle : {
                                color : '#fff'
                            }
                        },
                        emphasis : {
                            show : true,
                            textStyle : {
                                color : '#fff'
                            }
                        }
                    },
                    itemStyle : {
                        normal : {
                            areaColor : 'rgba(24,65,91,0.3)',
                            borderColor : '#9DDCEB',
                            borderWidth : 3,
                            shadowColor : '#9DDCEB',
                            shadowBlur : 20
                        },
                        emphasis : {
                            areaColor : 'rgba(24,65,91,0.3)'
                        }
                    }
                }
            })
        });
    });
</script>