echarts之矢量地图常见效果

矢量地图常见效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>快速上手</title>
  <!--  1。引入echart.js文件-->
  <script src="lib/echarts.min.js"></script>
  <script src="lib/jquery.min.js"></script>
</head>
<body>

<!--2。准备一个呈现图表的盒子-->
<div style="width: 600px;height: 400px;border:1px solid red"></div>

<script>
    //3。初始化echarts实力对象
    //
    var mCharts = echarts.init(document.querySelector('div'));
    $.get('map/province/anhui.json', function (ret) {
        console.log(ret)
        echarts.registerMap('anhui',ret);
        //4。准备配置项
        var option = {
            geo:{
                type:'map',
                map:'anhui',
                zoom:1.2,
                label:{
                    show:true
                },
                center:[116.507676, 31.752889]
            }
        }

        //5。将配置项设置给echarts实例对象
        mCharts.setOption(option);
    })

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

posted @ 2022-08-06 01:15  King-DA  阅读(129)  评论(0)    收藏  举报