echarts实现全国及各省市地图

本文主要是介绍echarts实现全国及各省市地图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

echarts实现全国及各省市地图（内附地图json文件）

去阿里云就可以获取：[阿里云地理]：http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4(http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4)

我想要广东省，点击对应省份即可，比如广东的：

<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 100%;height:500px;"></div>function initguangdong(){$.get('https://geo.datav.aliyun.com/areas_v3/bound/440000_full.json', function (json) {echarts.registerMap('广东', json);console.log("dfdf广东")var myecharts = echarts.init($('.map .guangdong')[0])option = {backgroundColor: '#080a20',title: {text: '广东大数据',x:'top'},// dataRange:{// 	min:0,// 	max:500,// 	text:['高','低'],// 	realtime:true,// 	calculable:true,//     color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea'],// },tooltip: {trigger: 'item'},//左侧小导航图标visualMap: {show: true,x: 'left',y: 'bottom',pieces: [      // 自定义每一段的范围，以及每一段的文字{ gte: 500, label: '500以上'}, // 不指定 max，表示 max 为无限大（Infinity）。{ gte: 400, lte: 500, label: '400-500'},{ gte: 300, lte: 400, label: '300-400'},{ gte: 200, lte: 300, label: '200-300'},{ gte: 100, lte: 200, label: '100-200'},{ gte: 0, lte: 100, label: '0-100'},// { lte: 10, label: '0-10'}          // 不指定 min，表示 min 为无限大（-Infinity）。],// splitList: [{//         start: 500,//         end: 600//     }, {//         start: 400,//         end: 500//     },//     {//         start: 300,//         end: 400//     }, {//         start: 200,//         end: 300//     },//     {//         start: 100,//         end: 200//     }, {//         start: 0,//         end: 100//     },// ],color: ['#5475f5', '#9feaa5', '#85daef', '#74e2ca', '#e6ac53', '#9fb5ea'],textStyle:{color:'#fff'},},// 底图背景色geo: {map: '广东',roam: false,zoom: 1.2,label: {emphasis: {show: false}},itemStyle: {normal: {areaColor: '#142957',borderColor: '#0692a4'},emphasis: {areaColor: '#0b1c2d'}}// itemStyle: {//     borderColor: 'transparent',//     areaColor: 'transparent'// }},series:[{name: '数据',type: 'map',mapType: '广东',zoom: 1.2,// roam: true,tooltip:{trigger:'item',/*折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比） */formatter:' {b}： </br> 专利：100 </br>发明：250</br> {c}'},label: {normal: {show: true //省份名称  },emphasis: {show: false}},data:[{name: '珠海市',value:173},{name: '广州市',value: 188},{name: '深圳市',value: 112},{name: '中山市',value:302},{name: '佛山市',value: 129},{name: '揭阳市',value:315},{name: '梅州市',value: 148},{name: '汕头市',value:120},{name: '东莞市',value: 181},{name: '惠州市',value:225},{name: '汕尾市',value: 154},{name: '江门市',value: 240},{name: '清远市',value: 351},{name: '肇庆市',value: 912},{name: '河源市',value: 704},{name: '韶关市',value: 550},{name: '云浮市',value: 672},{name: '潮州市',value: 802},{name: '阳江市',value: 114},{name: '茂名市',value: 238},{name: '湛江市',value: 422},]}],};myecharts.setOption(option);window.addEventListener("resize", function () {myecharts.resize();});})
}

最终效果如下：

这篇关于echarts实现全国及各省市地图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---