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>
效果如下：
需要注意的点：