echarts的自定义地图

标签引入js文件

1 <script type="text/javascript" src="echarts/require.js"></script>
2 <script type="text/javascript" src="echarts/echarts.js"></script>

html部分：

1 <div id="test">
2     <div id="main" style="height:500px;border:1px solid #e4393c"></div>
3 </div>

js部分：

  1 require.config({
  2     paths : {
  3         echarts : 'echarts/echarts',
  4         'ehcarts/chart/map' : 'chart/map'
  5     }
  6 });//加载echarts.js和map.js
  7 require(
  8     [
  9         'echarts',
 10         'echarts/chart/map'
 11     ],
 12     function(ec){                        
　　　　　　require('echarts/util/mapData/params').params.ship  = {
 13               getGeoJson : function(callback){
 14                  $.ajax({
 15                     url"echarts/echarts/oneFloor.svg",//svg地图
 16                     dataType : "xml",
 17                     success : function(xml){
 18                     　　callback(xml);
 19                     }
 20                   });
 21                }
 22       }
 23                 var myChart = ec.init(document.getElementById('main'));
 24                 var option = {    
 25 　　　　　　　　　　　　title : {
 26                         text : '测试'
 27                     },
 28                     tooltip : {
 29                         trigger : 'item',
 30                         formatter : '{b}'
 31                     },
 32                     series : [
 33                         {
 34                             name: '嘿嘿',
 35                             type: 'map',
 36                             mapType: 'ship',
 37                             roam:true,
 38                             itemStyle:{
 39                                 normal:{label:{show:true}},
 40                                 emphasis:{label:{show:true}}
 41                             },
 42                             data: [],
 43                             geoCoord: {
 44                                 '叮叮': [0, 0],
 45                                 '小兑儿': [100, 45]
 46                             },
 47                             markPoint : {
 48                                 symbol : 'image://img/logo-blue.png',
 49                                 symbolSize : 10,
 50                                 effect : {
 51                                     show : true
 52                                 },
 53                                 data : [
 54                                     {name: '叮叮'},
 55                                     {name: '小兑儿'}
 56                                 ]
 57                             },
 58                             markLine : {
 59                                 smooth:true,
 60                                 effect : {
 61                                     show: true,
 62                                     scaleSize: 1,
 63                                     period: 20,
 64                                     color: '#fff',
 65                                     shadowBlur: 5
 66                                 },
 67                                 symbol: ['none'],
 68                                 itemStyle : {
 69                                     normal: {
 70                                         borderWidth:1,
 71                                         lineStyle: {
 72                                             type: 'solid'
 73                                         }
 74                                     }
 75                                 },
 76                                 data : [
 77                                     [
 78                                         {name:'erik'}, 
 79                                         {name:'胡瑶'}
 80                                     ],
 81                                     [
 82                                         {name:'祖明'}, 
 83                                         {name:'叮叮'}
 84                                     ],
 85                                     [
 86                                         {name:'祖明'}, 
 87                                         {name:'小兑儿'}
 88                                     ]
 89                                 ]
 90                             }
 91                         },
 92                         {
 93                             name : '信达泰',
 94                             type : 'map',
 95                             mapType : 'ship',
 96                             roam : true,
 97                             itemStyle:{
 98                                 normal:{label:{show:true}},
 99                                 emphasis:{label:{show:true}}
100                             },
101                             data: [],
102                             geoCoord: {
103                                 '孙经理': [100, 245],
104                                 '小姜同学': [100, 345]
105                             },
106                             markPoint : {
107                                 symbolSize : 10,
108                                 symbol : 'image://img/icon.png',
109                                 data : [
110                                     {name : '孙经理'},
111                                     {name : '小姜同学'},
112                                     
113                                 ]
114                             }
115                         },
116                         {
117                             name: '高经',
118                             type: 'map',
119                             mapType: 'ship',
120                             roam:true,
121                             symbol: ['none'],
122                             itemStyle:{
123                                 normal:{label:{show:true}},
124                                 emphasis:{label:{show:true}}
125                             },
126                             data: [],
127                             markLine : {
128                                 smooth:true,
129                                 effect : {
130                                     show: true,
131                                     scaleSize: 1,
132                                     period: 20,
133                                     color: '#fff',
134                                     shadowBlur: 5
135                                 },
136                                 itemStyle : {
137                                     normal: {
138                                         borderWidth:1,
139                                         lineStyle: {
140                                             type: 'solid'
141                                         }
142                                     }
143                                 },
144                                 data : [
145                                     [
146                                         {name:'高经'}, 
147                                         {name:'洗手间', geoCoord:[440, 179]}
148                                     ],
149                                     [
150                                         {name:'高经'}, 
151                                         {name:'洗手间', geoCoord:[637, 53]}
152                                     ],
153                                     [
154                                         {name:'高经'}, 
155                                         {name:'洗手间', geoCoord:[637, 179]}
156                                     ],
157                                     [
158                                         {name:'高经'},
159                                         {name:'洗手间', geoCoord:[307, 179]}
160                                     ]
161                                 ]
162                             }
163                         }
164                     ]
165                 };
166                 myChart.setOption(option);
167             }
168         )

 

完整部分：

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title></title>
  5     <script type="text/javascript" src="echarts/jquery.min.js"></script>
  6     <script type="text/javascript" src="echarts/require.js"></script>
  7     <script type="text/javascript" src="echarts/echarts.js"></script>
  8     <style type="text/css">
  9         #test{
 10             /*background:url("img/login.jpg");*/
 11         }
 12     </style>
 13 </head>
 14 <body>
 15     <div id="test">
 16         <div id="main" style="height:500px;border:1px solid #e4393c"></div>
 17         
 18     </div>
 19     <script type="text/javascript">
 20         require.config({
 21             paths : {
 22                 echarts : 'echarts/echarts',
 23                 'ehcarts/chart/map' : 'chart/map'
 24             }
 25         });
 26         require(
 27             [
 28                 'echarts',
 29                 'echarts/chart/map'
 30             ],
 31             function(ec){
 32                 require('echarts/util/mapData/params').params.ship  = {
 33                     getGeoJson : function(callback){
 34                         $.ajax({
 35                                 url : "echarts/echarts/bg-test.svg",
 36                                 dataType : "xml",
 37                                 success : function(xml){
 38                                     callback(xml);
 39                                 }
 40                             });
 41                     }
 42                 }
 43                 var myChart = ec.init(document.getElementById('main'));
 44                 var option = {
 45                     title : {
 46                         text : '测试'
 47                     },
 48                     tooltip : {
 49                         trigger : 'item',
 50                         formatter : '{b}'
 51                     },
 52                     series : [
 53                         {
 54                             name: '嘿嘿',
 55                             type: 'map',
 56                             mapType: 'ship',
 57                             roam:true,
 58                             itemStyle:{
 59                                 normal:{label:{show:true}},
 60                                 emphasis:{label:{show:true}}
 61                             },
 62                             data: [],
 63                             geoCoord: {
 64                                 '叮叮': [0, 0],
 65                                 '小兑儿': [100, 45],
 66                                 '胡瑶': [195, 29],
 67                                 '祖明': [195, 44],
 68                                 '林峰': [195, 60],
 69                                 '安晨': [210, 44],
 70                                 '功': [210, 60],
 71                                 '立新': [144, 59],
 72                                 '诗才': [195, 71],
 73                                 '黄競': [210, 59],
 74                                 '浪宇': [150, 55],
 75                                 '晓青': [210, 71],
 76                                 '毅楠': [222, 59],
 77                                 '朝霞': [222, 71],
 78                                 '武琦': [231, 71],
 79                                 '严萍': [231, 46],
 80                                 '绍波': [231, 59],
 81                                 '开放': [488, 43],
 82                                 '兵兵': [488, 60],
 83                                 '孟珂': [522, 43],
 84                                 '辉耀': [522, 60],
 85                                 '佳璐': [488, 23],
 86                                 '新乐': [522, 23],
 87                                 '大佛': [165, 29],
 88                                 '周玉': [165, 44],
 89                                 '令君': [165, 60],
 90                                 '佳璐': [165, 71],
 91                                 'erik': [222, 44],
 92                                 '爽哥': [240, 60],
 93                                 '雷哥': [240, 44],
 94                                 '坤哥': [176, 59],
 95                                 '刚哥': [176, 71],
 96                                 '高经': [545, 54],
 97                                 '邱华': [468, 23],
 98                                 '饥渴难耐的辉辉': [473, 40],
 99                                 '大发': [500, 40],
100                                 '淼童': [473, 60],
101                                 '亚江': [500, 60],
102                                 '莉姐': [530, 70],
103                                 '红启': [570, 54],
104                                 '五福降中天': [373, 173],
105                                 'csfe': [500, 54],
106                                 '得胜令': [253, 179],
107                                 '西湖春': [496, 179],
108                                 '望江南': [72, 203],
109                                 '庆千秋': [86, 203],
110                                 '过江龙': [289, 32],
111                                 '天下乐': [289, 50],
112                                 '万年欢': [687, 24],
113                                 '浣溪沙': [637, 203],
114                                 '清平乐': [649, 203],
115                                 '四和春': [663, 203],
116                                 '杏花天': [676, 203]
117                             },
118                             markPoint : {
119                                 symbol : 'image://img/logo-blue.png',
120                                 symbolSize : 10,
121                                 effect : {
122                                     show : true
123                                 },
124                                 data : [
125                                     {name: '叮叮'},
126                                     {name: '小兑儿'},
127                                     {name: '胡瑶'},
128                                     {name: '高经'},
129                                     {name: 'erik'},
130                                     {name: '祖明'},
131                                     {name: '林峰'},
132                                     {name: '坤哥'},
133                                     {name: '刚哥'},
134                                     {name: '爽哥'},
135                                     {name: '雷哥'},
136                                     {name: '邱华'},
137                                     {name: '淼童'},
138                                     {name: '亚江'},
139                                     {name: '莉姐'},
140                                     {name: '大发'},
141                                     {name: '饥渴难耐的辉辉'},
142                                     {name: '红启'},
143                                     {name: '安晨'},
144                                     {name: '功'},
145                                     {name: '立新'},
146                                     {name: '诗才'},
147                                     {name: '黄競'},
148                                     {name: '晓青'},
149                                     {name: '毅楠'},
150                                     {name: '浪宇'},
151                                     {name: '朝霞'},
152                                     {name: '严萍'},
153                                     {name: '武琦'},
154                                     {name: '绍波'},
155                                     {name: '开放'},
156                                     {name: '兵兵'},
157                                     {name: '孟珂'},
158                                     {name: '辉耀'},
159                                     {name: '佳璐'},
160                                     {name: '新乐'},
161                                     {name: '周玉'},
162                                     {name: '令君'},
163                                     {name: '佳璐'}
164                                 ]
165                             },
166                             markLine : {
167                                 smooth:true,
168                                 effect : {
169                                     show: true,
170                                     scaleSize: 1,
171                                     period: 20,
172                                     color: '#fff',
173                                     shadowBlur: 5
174                                 },
175                                 symbol: ['none'],
176                                 itemStyle : {
177                                     normal: {
178                                         borderWidth:1,
179                                         lineStyle: {
180                                             type: 'solid'
181                                         }
182                                     }
183                                 },
184                                 data : [
185                                     [
186                                         {name:'erik'}, 
187                                         {name:'胡瑶'}
188                                     ],
189                                     [
190                                         {name:'祖明'}, 
191                                         {name:'叮叮'}
192                                     ],
193                                     [
194                                         {name:'祖明'}, 
195                                         {name:'小兑儿'}
196                                     ]
197                                 ]
198                             }
199                         },
200                         {
201                             name : '信达泰',
202                             type : 'map',
203                             mapType : 'ship',
204                             roam : true,
205                             itemStyle:{
206                                 normal:{label:{show:true}},
207                                 emphasis:{label:{show:true}}
208                             },
209                             data: [],
210                             geoCoord: {
211                                 '孙经理': [100, 245],
212                                 '小姜同学': [100, 345]
213                             },
214                             markPoint : {
215                                 symbolSize : 10,
216                                 symbol : 'image://img/icon.png',
217                                 data : [
218                                     {name : '孙经理'},
219                                     {name : '小姜同学'},
220                                     
221                                 ]
222                             }
223                         },
224                         {
225                             name: '高经',
226                             type: 'map',
227                             mapType: 'ship',
228                             roam:true,
229                             symbol: ['none'],
230                             itemStyle:{
231                                 normal:{label:{show:true}},
232                                 emphasis:{label:{show:true}}
233                             },
234                             data: [],
235                             markLine : {
236                                 smooth:true,
237                                 effect : {
238                                     show: true,
239                                     scaleSize: 1,
240                                     period: 20,
241                                     color: '#fff',
242                                     shadowBlur: 5
243                                 },
244                                 itemStyle : {
245                                     normal: {
246                                         borderWidth:1,
247                                         lineStyle: {
248                                             type: 'solid'
249                                         }
250                                     }
251                                 },
252                                 data : [
253                                     [
254                                         {name:'高经'}, 
255                                         {name:'洗手间', geoCoord:[440, 179]}
256                                     ],
257                                     [
258                                         {name:'高经'}, 
259                                         {name:'洗手间', geoCoord:[637, 53]}
260                                     ],
261                                     [
262                                         {name:'高经'}, 
263                                         {name:'洗手间', geoCoord:[637, 179]}
264                                     ],
265                                     [
266                                         {name:'高经'},
267                                         {name:'洗手间', geoCoord:[307, 179]}
268                                     ]
269                                 ]
270                             }
271                         }
272                     ]
273                 };
274                 myChart.setOption(option);
275             }
276         )
277     </script>
278     <script type="text/javascript">
279         $("#sel select").change(function(){
280             selectChange($(this).val());
281         })
282 
283     </script>
284 </body>
285 </html>

 

效果如下：

 需要注意的点：