關於如何使用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>

效果如圖

關於如何使用echarts實現市縣區地圖的視覺化

相關文章