用 Echarts 无论是制作省份地图还是区县域地图,他们的步骤都是基本一样的。
下面本人就 利用 Echarts 简单绘制省份地图 的步骤与经验与各位分享一下。
例:
var jiangsuJson = {"type": "FeatureCollection",
"cp":[118.8586,32.915],
........
}
<script type="text/javascript" src="/static/js/echarts.min.js"></script> <script type="text/javascript" src="/static/js/jiangsu.js"></script>
<div> {# 标记 #} <a class="btn btn-success btn-sm" >江苏省</a> {# 地图代码开始 #} <div class="x-body"> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 949.75px;height:450px;"></div> </div> <script type="text/javascript"> echarts.registerMap(‘jiangsu‘, jiangsuJson); // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById(‘main‘)); // 使用刚指定的配置项和数据显示图表。 myChart.setOption({ series: [{ type: ‘map‘, map: ‘jiangsu‘ }] }); </script> </div>
其实只要按照本人上面的做法,就可以制作出来,本人绘不是很复杂,如果各位对省图还需要其他显示功能,大家不妨访问 Echarts 的官网。
原文:https://www.cnblogs.com/xcbb/p/14704462.html