1. 引入echarts插件(注意编码格式,个人建议UTF-8对中文的兼容性更好一点)
2.建立一个有高度和宽度的dom(建议div)
3.获取地图json文件,设置option,展示地图。各个省的地图json数据官网有下载。
废话不多说,直接上代码
<script type="text/javascript" src="./javaScript/echarts.min.js" charset="utf-8"/> <div id="mainMap" style="width:400px;height:400px">
//用山东地图展示各个地市的人口数量 $.get(‘/map/shandong.json‘, function (mapJson) { echarts.registerMap(‘shandong‘, mapJson); var chart = echarts.init(document.getElementById(‘mainMap‘));//在id为mainMap的dom元素中显示地图 chart.setOption({ tooltip: { trigger: ‘item‘, formatter: function(params) {//回调函数,参数params具体格式参加官方API //鼠标放到某个地市上,显示这个地市的名称加人口数3 //例如 params.name:当前地市名称。params.value:你传入的json数据与当前地市匹配的一项。 //params.data.value:你传入的json数据与当前地市匹配的一项中‘value‘对应的数据 return params.name+":"+params.data.value; } }, series: [{ type: ‘map‘, map: ‘shandong‘,//要和echarts.registerMap()中第一个参数一致 label: { normal: { show: true }, emphasis: { show: true } }, data : dataParam//人口数据:例如[{name:‘济南‘,value:‘100万‘},{name:‘菏泽‘,value:‘100万‘}......] }] }), chart.on(‘click‘, function (params) {//回调函数,点击时触发,参数params格式参加官方API alert(params.name);//弹出当前点击城市的名称 }); });
效果图:
时间: 2024-10-09 01:46:19