html简单插入echart.js地图

lingling哟

已于 2024-01-05 09:34:20 修改

阅读量705

点赞数 11

文章标签： html javascript swift

于 2024-01-05 09:21:52 首次发布

本文链接：https://blog.csdn.net/u013486113/article/details/133860154

版权

<div id="chartMap" style="width:800px;height:800px;margin:0 auto;"></div>
<input type="hidden" id="mapurlid" value="https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json">
<!--JSON数据:-->
<!--北京：https://geo.datav.aliyun.com/areas_v3/bound/110000_full.json-->
<!--其他省市查询行政区划代码，修改编码即可-->

<script src="jquery.min.js"></script>
<!--http://code.jquery.com/jquery.min.js-->
<script src="echarts.min.js"></script>
<!--https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js-->
<script>
//地图绘制
function echartsMap() {
    var self = this;
    var mapChart = echarts.init(document.getElementById('chartMap'));
    var mapUrl = $("#mapurlid").val();
    $.getJSON(mapUrl, function (mapJson) {
        echarts.registerMap('chinaMap', mapJson);
        mapChart.setOption({
            geo: {
                type: 'map', 
                map: 'chinaMap', 
                label: {
                    show: true
                }, 
                zoom: 1.1
            }
        });
    })
};
echartsMap();
</script>