echarts 区域地图加载

最新推荐文章于 2024-07-30 17:42:10 发布

原创最新推荐文章于 2024-07-30 17:42:10 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用ECharts和jQuery进行地图数据可视化，包括初始化ECharts实例、加载地图JSON文件及设置地图样式等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>


<script src="jquery.min.js"></script>
<script src="echarts.js"></script>
<div id="main" style="width: 100%;height:800px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));




//地图数据
   var uploadedDataURL = "420100.json";

    $.get(uploadedDataURL, function(geoJson) {

        echarts.registerMap(name, geoJson);

        myChart.setOption(option = {
            backgroundColor: '#ffffff',
            series: [{
                type: 'map',
                mapType: name,
                label: {
                    normal: {
                        show: true
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: '#389BB7',
                        areaColor: '#fff',
                    },
                    emphasis: {
                        areaColor: '#389BB7',
                        borderWidth: 0
                    }
                },
                animation: false,
                data: []

            }]
        });
    });



</script>
</body>
</html>