关于如何使用echarts实现市县区地图的可视化

找了很多资料，终于实现了

获取genjson的方式，很好用！！！

AreaCity Geo格式转换工具 (gitee.io)

然后将数据格式贴在下面就可以了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>石家庄市</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.js"></script>
    <style>
        html, body, #main {
            padding: 0px;
            margin: 0px;
            height: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="main"></div>
    <script type="text/javascript">
        var mapData = {
//贴在这里
        };

        var myChart = echarts.init(document.getElementById('main'));
        echarts.registerMap("luoyang", mapData);
        var option = {
            series: [{
                map: "luoyang",
                type: "map",
                aspectScale: 1.0,
                selectedMode: 'single', //选择类型,
                hoverable: true, //启用鼠标经过高亮
                roam: true, //启用鼠标滚轮缩放
                itemStyle: {
                    normal: {
                        borderWidth: 1,
                        borderColor: '#2F89CF', // 更改轮廓边界颜色
                        areaColor: 'rgba(3, 49, 120, 0.8)', // 更改区域底色为80%透明度的深蓝色
                        label: {
                            show: true,
                            textStyle: {
                                color: '#ffffff', // 更改文字颜色为白色
                                fontSize: 14 // 更改文字大小
                            }
                        }
                    },
                    emphasis: { // 选中样式
                        borderWidth: 1,
                        borderColor: '#00D887',
                        areaColor: 'rgba(3, 63, 150, 0.6)', // 更改鼠标接触颜色为80%透明度的蓝色
                        label: {
                            show: true,
                            textStyle: {
                                color: '#ffffff' // 更改选中文字颜色为白色
                            }
                        }
                    }
                }
            }]
        };
        myChart.setOption(option);



    </script>

</body>
</html>

 效果如图

 

posted @ 2024-03-18 03:13  喝着农药吐泡泡o  阅读(47)  评论(0)  编辑  收藏  举报