查看了echarts上面香港的地图扩展以后自己做了一个云南地图扩展:
里面的jquery和echarts文件自行下载,地图json数据我已经上传资源了。
下面直接贴代码不磨叽
<!DOCTYPE html> <html style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/echarts.min.js"></script> <script type="text/javascript"> var dom = document.getElementById("container"); var myChart = echarts.init(dom); var app = {}; option = null; myChart.showLoading(); $.get('yunnan.json', function (geoJson) { myChart.hideLoading(); echarts.registerMap('YN', geoJson); myChart.setOption(option = { title: { text: '云南各个州市的地理面积统计', }, tooltip: { trigger: 'item', formatter: '{b}<br/>{c} (平方千米)' }, toolbox: { show: true, orient: 'vertical', left: 'right', top: 'center', feature: { dataView: {readOnly: false}, restore: {}, saveAsImage: {} } }, visualMap: { min: 800, max: 50000, text:['High','Low'], realtime: false, calculable: true, inRange: { color: ['lightskyblue','yellow', 'orangered'] } }, series: [ { name: '云南地理面积地图', type: 'map', mapType: 'YN', // 自定义扩展图表类型 itemStyle:{ normal:{label:{show:true}}, emphasis:{label:{show:true}} }, data:[ {name: '保山市', value: 19637}, {name: '楚雄彝族自治州', value: 29258}, {name: '大理白族自治州', value: 29459}, {name: '德宏傣族景颇族自治州', value: 11526}, {name: '迪庆藏族自治州', value: 23870}, {name: '红河哈尼族彝族自治州', value: 32931}, {name: '昆明市', value:21473}, {name: '丽江市', value: 21219}, {name: '临沧市', value: 24469}, {name: '怒江傈僳族自治州', value: 14703}, {name: '曲靖市', value: 29855}, {name: '普洱市', value: 45385}, {name: '文山壮族苗族自治州', value: 32239}, {name: '西双版纳傣族自治州', value: 19107}, {name: '玉溪市', value: 15285}, {name: '昭通市', value: 23021} ] } ] }); });; if (option && typeof option === "object") { myChart.setOption(option, true); } </script> </body> </html>如有问题请多多指教,谢谢!