关于echarts3地图下钻省市

最近关于echarts3弄了个地图下钻，也许是因为运气不好，开始上来需要传递到的城市是成都，结果成都地图（js）加载下来总是挤到了一起，好尴尬，各方实验查找后发现原来是js文件中，成都市地图有个县市并没有画出来，导致比例不正常。。。。要是有做成都的，需要注意下。。下面直接铺上三连跳下钻地图吧。。

  1 <!DOCTYPE html>
  2 
  3 <head>
  4 
  5 <meta charset="utf-8">
  6 
  7 <title>ECharts 地图展示</title>
  8 
  9 </head>
 10 <style type="text/css">
 11     *{
 12         margin: 0;
 13         padding: 0;
 14     }
 15 </style>
 16 
 17 <body>
 18 
 19 <!--定义页面图表容器-->
 20 
 21 <!-- 必须制定容器的大小（height、width） -->
 22 
 23  <div id="maps" style="width: 33%; height: 500px; border: 1px solid #ccc; display: inline-block;float: left;"></div>
 24  <div id="mapsProvice" style="width: 33%; height: 500px; border: 1px solid #ccc; display: inline-block;float: left;"></div>
 25  <div id="mapsCity" style="width: 33%; height: 500px; border: 1px solid #ccc; display: inline-block;float: left;"></div>
 26 
 27 
 28 
 29 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 30 <script type="text/javascript" src="js/echarts.min.js"></script>
 31 <script type="text/javascript" src="js/china.js"></script>
 32 <script type="text/javascript" src="js/provice.js"></script>
 33 <script type="text/javascript" src="js/chengdu.js"></script>
 34 <script type="text/javascript" src="js/zigong.js"></script>
 35     
 36 
 37 
 38 <script type="text/javascript">
 39 
 40 var myChartMap = echarts.init(document.getElementById('maps'));
 41 
 42 var option = {
 43     title: {
 44 
 45     text: '全国态势图',
 46 
 47     subtext: '进入省市可详细查看',
 48 
 49     x:'center',
 50 
 51     textStyle: {
 52 
 53         color: '#404a59'
 54 
 55     }
 56 
 57 },
 58 legend: {
 59         orient: 'vertical',
 60         x:'left',
 61         data:['安全状态']
 62     },
 63     dataRange: {
 64         orient: 'vertical',
 65         x: 'left',
 66         min: 0,
 67         max: 1000,
 68         color:['orange','yellow'],
 69         text:['高','低'],           // 文本，默认为数值文本
 70 
 71     },
 72     series : [
 73         {
 74             tooltip: {
 75                 trigger: 'item',
 76                 formatter: '{b}'
 77             },
 78             name: '安全态势',
 79             type: 'map',
 80             mapType: 'china',         
 81             x: '5%',
 82             y: 'center',
 83             roam: false,
 84             selectedMode : 'single',
 85             itemStyle:{
 86                   normal:{label:{show:true}},
 87                 emphasis:{label:{show:true}}
 88             },
 89             data:[
 90                 {name: '北京', selected:true,value:100},
 91                 {name: '天津', selected:false},
 92                 {name: '上海', selected:false},
 93                 {name: '重庆', selected:true,value:100},
 94                 {name: '河北', selected:false},
 95                 {name: '河南', selected:false},
 96                 {name: '云南', selected:false},
 97                 {name: '辽宁', selected:true,value:100},
 98                 {name: '黑龙江', selected:false},
 99                 {name: '湖南', selected:true,value:1000},
100                 {name: '安徽', selected:false},
101                 {name: '山东', selected:false},
102                 {name: '新疆', selected:false},
103                 {name: '江苏', selected:false},
104                 {name: '浙江', selected:false},
105                 {name: '江西', selected:false},
106                 {name: '湖北', selected:false},
107                 {name: '广西', selected:false},
108                 {name: '甘肃', selected:false},
109                 {name: '山西', selected:false},
110                 {name: '内蒙古', selected:false},
111                 {name: '陕西', selected:false},
112                 {name: '吉林', selected:false},
113                 {name: '福建', selected:false},
114                 {name: '贵州', selected:false},
115                 {name: '广东', selected:false},
116                 {name: '青海', selected:false},
117                 {name: '西藏', selected:false},
118                 {name: '四川', selected:false},
119                 {name: '宁夏', selected:false},
120                 {name: '海南', selected:false},
121                 {name: '台湾', selected:false},
122                 {name: '香港', selected:false},
123                 {name: '澳门', selected:false}
124             ]
125         }
126     ],
127     animation: false
128 };
129 
130 myChartMap.setOption(option, true); //显示国家地图
131 var myChartProvice = echarts.init(document.getElementById('mapsProvice'));
132 var myChartCity = echarts.init(document.getElementById('mapsCity'));
133 myChartMap.on('mapselectchanged',function (param){//单击省份事件
134     var selectProvice = param.name;
135     console.log(selectProvice);
136     var option = {
137         series : [
138         {
139             tooltip: {
140                 trigger: 'item',
141                 formatter: '{b}'
142             },
143             name: '安全态势',
144             type: 'map',
145             mapType: selectProvice,         
146             x: '5%',
147             y: 'center',
148             roam: true,
149             itemStyle:{
150                 normal:{label:{show:true}},
151                 emphasis:{label:{show:true}}
152             },
153             selectedMode : 'single',
154             itemStyle:{
155                   normal:{label:{show:true}},
156                 emphasis:{label:{show:true}}
157             },
158             data:[],
159             }
160        ],
161       animation: false,
162       
163     }
164     myChartProvice.setOption(option, true);
165 })
166                     
167 
168  //选择地级市的单击事件
169 
170 myChartProvice.on('mapselectchanged', function (param){
171     var selectCity = param.name;
172 //    调取后台数据
173     $.ajax({
174         type:"get",
175         url:"",
176         async:true,
177         data:{
178             place:selectCity,
179          },
180         success:function(date){
181             if(date == '1'){
182                 alert('暂无数据');
183                 
184             }else{
185 //            数据查询成功
186              var option = {
187                     series : [
188                     {
189                         tooltip: {
190                             trigger: 'item',
191                             formatter: '{b}'
192                         },
193                         name: '安全态势',
194                         type: 'map',
195                         mapType: selectCity,         
196                         x: '5%',
197                         y: 'center',
198                         roam: true,
199                         itemStyle:{
200                             normal:{label:{show:true}},
201                             emphasis:{label:{show:true}}
202                         },
203                         selectedMode : 'single',
204                         data:[],
205                         }
206                    ],
207                   animation: false,
208                   
209                }
210                 myChartCity.setOption(option, true);
211             }
212         }
213 
214     });
215      
216      var option = {
217         series : [
218         {
219             tooltip: {
220                 trigger: 'item',
221                 formatter: '{b}'
222             },
223             name: '安全态势',
224             type: 'map',
225             mapType: selectCity,         
226             x: '5%',
227             y: 'center',
228             roam: true,
229             itemStyle:{
230                 normal:{label:{show:true}},
231                 emphasis:{label:{show:true}}
232             },
233             selectedMode : 'single',
234             data:[],
235             }
236        ],
237       animation: false,
238       
239     }
240 
241 
242     myChartCity.setOption(option, true);
243 });
244 
245 </script>
246 
247 </body>
248 
249 </html>

地图js代码实在echarts上下载的，不过这些代码是根据geojson来的  ，有兴趣可以看一下！

posted @ 2017-07-21 16:44  yuwenjing  阅读(917)  评论(0)    收藏  举报