echarts 炫酷北京地图

最新推荐文章于 2022-07-06 10:58:01 发布

原创最新推荐文章于 2022-07-06 10:58:01 发布 · 7.9k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #地图 #炫酷 #文字居中

本文介绍如何使用ECharts和jQuery实现北京地区地图的可视化效果。通过加载JSON格式的地图数据，并利用ECharts的map系列配置项，可以自定义地图样式，包括标签文字颜色、区域填充颜色等。

代码如下

<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>

效果图

点击下载