Echarts3之全国地图和省市地图二合一整合

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

没图说个ji 先上图

开始接触时是echarts 2 ，echarts升级至echarts 3 之后没怎么接触，通过介绍了解到，echarts3变得更加人性化，将一些底层的方法开放出来，增加的echarts的扩展性。

很遗憾echarts3并没有提供市级的地图的demo。

于是将echarts2中的demo直接拿来改

下面是代码：希望能帮助到你

<!DOCTYPE html><head><meta charset="utf-8"><title>ECharts</title><!-- ECharts单文件引入 --><script src="js/echarts3.js"></script><script src="js/china.js"></script><script src="js/shandong.js"></script><script src="js/hebei.js"></script>
</head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px"></div>
</body>
<script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));var option = {tooltip: {trigger: 'item'},legend: {orient: 'vertical',x: 'left',data: ['iphone3']},visualMap : {min: 0,max: 1000,x: 'left',y: 'bottom',color: ['orangered','yellow','lightskyblue'],text: ['高', '低'], // 文本，默认为数值文本calculable: true},toolbox: {show: true,orient: 'vertical',x: 'right',y: 'center',feature: {mark: {show: true},dataView: {show: true,readOnly: false}}},series: [{tooltip: {trigger: 'item',},name: 'iphone3',type: 'map',mapType: 'china',left: 10,selectedMode: 'single',label: {normal: {show: true,textStyle: {fontSize: 9,}},emphasis: {show: true,textStyle: {fontStyle: 'oblique',fontSize: 9,}}},showLegendSymbol: false,data: [{name: '北京',selected: false,value: Math.round(Math.random() * 1000)}, {name: '天津',selected: false,value: Math.round(Math.random() * 1000)}, {name: '上海',selected: false,value: Math.round(Math.random() * 1000)}, {name: '重庆',selected: false,value: Math.round(Math.random() * 1000)}, {name: '河北',selected: false,value: Math.round(Math.random() * 1000)}, {name: '河南',selected: false,value: Math.round(Math.random() * 1000)}, {name: '云南',selected: false,value: Math.round(Math.random() * 1000)}, {name: '辽宁',selected: false,value: Math.round(Math.random() * 1000)}, {name: '黑龙江',selected: false,value: Math.round(Math.random() * 1000)}, {name: '湖南',selected: false,value: Math.round(Math.random() * 1000)}, {name: '安徽',selected: false,value: Math.round(Math.random() * 1000)}, {name: '山东',selected: false,value: Math.round(Math.random() * 1000)}, {name: '新疆',selected: false,value: Math.round(Math.random() * 1000)}, {name: '江苏',selected: false,value: Math.round(Math.random() * 1000)}, {name: '浙江',selected: false,value: Math.round(Math.random() * 1000)}, {name: '江西',selected: false,value: Math.round(Math.random() * 1000)}, {name: '湖北',selected: false,value: Math.round(Math.random() * 1000)}, {name: '广西',selected: false,value: Math.round(Math.random() * 1000)}, {name: '甘肃',selected: false,value: Math.round(Math.random() * 1000)}, {name: '山西',selected: false,value: Math.round(Math.random() * 1000)}, {name: '内蒙古',selected: false,value: Math.round(Math.random() * 1000)}, {name: '陕西',selected: false,value: Math.round(Math.random() * 1000)}, {name: '吉林',selected: false,value: Math.round(Math.random() * 1000)}, {name: '福建',selected: false,value: Math.round(Math.random() * 1000)}, {name: '贵州',selected: false,value: Math.round(Math.random() * 1000)}, {name: '广东',selected: false,value: Math.round(Math.random() * 1000)}, {name: '青海',selected: false,value: Math.round(Math.random() * 1000)}, {name: '西藏',selected: false,value: Math.round(Math.random() * 1000)}, {name: '四川',selected: false,value: Math.round(Math.random() * 1000)}, {name: '宁夏',selected: false,value: Math.round(Math.random() * 1000)}, {name: '海南',selected: false,value: Math.round(Math.random() * 1000)}, {name: '台湾',selected: false,value: Math.round(Math.random() * 1000)}, {name: '香港',selected: false,value: Math.round(Math.random() * 1000)}, {name: '澳门',selected: false,value: Math.round(Math.random() * 1000)}]}, ],};myChart.on('mapselectchanged', function(param) {var selected = param.selected;var selectedProvince;var name;for(var i = 0, l = option.series[0].data.length; i < l; i++) {name = option.series[0].data[i].name;option.series[0].data[i].selected = selected[name];if(selected[name]) {selectedProvince = name;}}if(typeof selectedProvince == 'undefined') {option.series.splice(1);myChart.setOption(option, true);return;}option.series[1] = {name: '随机数据',type: 'map',mapType: selectedProvince,showLegendSymbol: false,label: {normal: {show: true,textStyle: {fontSize: 9,}},emphasis: {show: true,textStyle: {fontStyle: 'oblique',fontSize: 9,}}},mapLocation: {x: '35%'},roam: true,data: [{name: '烟台市',value: Math.round(Math.random() * 1000)}, {name: '临沂市',value: Math.round(Math.random() * 1000)}, {name: '潍坊市',value: Math.round(Math.random() * 1000)}, {name: '青岛市',value: Math.round(Math.random() * 1000)}, {name: '菏泽市',value: Math.round(Math.random() * 1000)}, {name: '济宁市',value: Math.round(Math.random() * 1000)}, {name: '德州市',value: Math.round(Math.random() * 1000)}, {name: '滨州市',value: Math.round(Math.random() * 1000)}, {name: '聊城市',value: Math.round(Math.random() * 1000)}, {name: '东营市',value: Math.round(Math.random() * 1000)}, {name: '济南市',value: Math.round(Math.random() * 1000)}, {name: '泰安市',value: Math.round(Math.random() * 1000)}, {name: '威海市',value: Math.round(Math.random() * 1000)}, {name: '日照市',value: Math.round(Math.random() * 1000)}, {name: '淄博市',value: Math.round(Math.random() * 1000)}, {name: '枣庄市',value: Math.round(Math.random() * 1000)}, {name: '莱芜市',value: Math.round(Math.random() * 1000)}, {name: '张家口市',value: Math.round(Math.random() * 1000)}, {name: '保定市',value: Math.round(Math.random() * 1000)}, {name: '唐山市',value: Math.round(Math.random() * 1000)}, {name: '沧州市',value: Math.round(Math.random() * 1000)}, {name: '石家庄市',value: Math.round(Math.random() * 1000)}, {name: '邢台市',value: Math.round(Math.random() * 1000)}, {name: '邯郸市',value: Math.round(Math.random() * 1000)}, {name: '秦皇岛市',value: Math.round(Math.random() * 1000)}, {name: '衡水市',value: Math.round(Math.random() * 1000)}, {name: '廊坊市',value: Math.round(Math.random() * 1000)}, ]};option.legend = {orient: 'vertical',x: 'left',data: ['iphone3']};option.visualMap = {min: 0,max: 1000,x: 'left',y: 'bottom',color: ['orangered','yellow','lightskyblue'],text: ['高', '低'], // 文本，默认为数值文本calculable: true};myChart.setOption(option, true);});// 为echarts对象加载数据 myChart.setOption(option);
</script>

但是这个程序有很多限制的因素：

①全国各省和省内各市数据共用同一套dataRange，在省内数据和省内各市数据相差比较大的时候，市内数据颜色变化不明显，影响用户体验。

②点击地图内省会触发一个mapselectchanged的函数，当选中省的时候触发获取到点击省的详细信息，但是如果取消选中的话，程序传入的对象就变成了undefined，需要找到判断undefined的代码处修改，当初我找的时候走了很多弯路，（取消选中的时候怎么可能传入的是undefined！！！但是事实上就是这样）。当初想对选中和取消选中进行单独的处理，但是最后以失败告终（主要是dispatchAction不太会用，或者根本在这没什么卵用）
以上就是主要的问题

这篇关于Echarts3之全国地图和省市地图二合一整合的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！