关于如何使用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>
复制代码

 效果如图

 

本文作者:TranquilTimber

本文链接:https://www.cnblogs.com/gbrr/p/18079535

版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   喝着农药吐泡泡o  阅读(128)  评论(0编辑  收藏  举报
历史上的今天:
2023-03-18 【Android】打卡app 今日完成情况记录
💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
收起
🔑
点击右上角即可分享
微信分享提示