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>

效果如下：

需要注意的点：

echarts地图扩展___自定义的svg图的更多相关文章

  1. echarts地图扩展文件使用geoJson格式。

    echarts地图扩展文件使用geoJson格式. 1.在线生成 http://ecomfe.github.io/echarts-map-tool/  这里可以生成省市区的json,但是最多生成到”区 ...

  2. 百度echarts地图扩展动态加载geoCoord

    var data={}; for(var i=0;i<result.length;i++){ data[(""+result[i].name+"")]=e ...

  3. Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据

    在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...

  4. Echarts 地图上显示数值

    Echarts 地图上展示数值,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', ...

  5. 本周学习总结(原生+Echarts地图)

    本周主要想完成工作中大屏地图相关的知识,所以学习的时间不是很长 dsa.js(数据结构) 拖了两个星期还没看,等啥时候继续研究算法和数据结构再看源码 GoJS 有时间要好好研究下 https://gi ...

  6. EChart系列：在echart3中使用百度地图扩展之后，如何获取到百度地图对象

    最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...

  7. 多个SVG图形集成到一个SVG图形上

    SVG:使用XML格式定义图像的可缩放矢量图形(Scalable Vector Graphics). 优点就不多说了,下面看看怎么将多个svg图形集成到一个svg图形上. 如果使用bootstrap框 ...

  8. C#Winform使用扩展方法自定义富文本框(RichTextBox)字体颜色

    在利用C#开发Winform应用程序的时候,我们有可能使用RichTextBox来实现实时显示应用程序日志的功能,日志又分为:一般消息,警告提示 和错误等类别.为了更好地区分不同类型的日志,我们需要使 ...

  9. WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现

    原文:WPF技术触屏上的应用系列(二): 嵌入百度地图.API调用及结合本地数据库在地图上进行自定义标点的实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系 ...

随机推荐

  1. 校友聊NABCD需求分析

    校友聊 NABCD需求分析 N:内网用户流量不够使用 A:基于局域网进行通讯 B:通讯不花费外网流量 C:目前学校还没有使用 D:将软件放在校园网,可以下载使用

  2. WebGL学习笔记五

    本章主要是对纹理的进一步讲解,我们很多时候需要将现实中已有 的图片在网页中展示出来而不是去创造图片,通过纹理 我们可以将光栅化的图形和图片纹理形成映射并且将图片在图形 中显示出来.基本过程与前几章一致 ...

  3. 配置JDBC

    在数据库和MyEclipse都安装好的情况下进行配置: 1.将JDBC(sqljdbc_4.0.2206.100_chs.exe)文件解压到C盘program files下面(也可以将解压后的文件Mi ...

  4. Beta 冲刺 （4/7)

    队名:日不落战队 安琪(队长) 过去两天完成了那些任务 完善已完成的界面. 接下来的任务 建立和上传收藏夹. 还剩下的任务 完善手写涂鸦. 遇到的困难 明天考试,准备通宵中. 有哪些收获和疑问 无. ...

  5. angularJS1笔记-(18)-$http及用angular实现JSONP跨域访问过程

    官网上的解释为: The $http service is a core AngularJS service that facilitates communication with the remot ...

  6. 配置高可用集群(实验) corosyne+pacemaker

    环境准备: 一准备三个虚拟机,把/etc/hosts/文件配置好                              192.168.43.9 node0                     ...

  7. yii 验证码 CCaptcha的总结(转)

    今天用到yii的验证码 ccaptcha,经过在网上搜寻 找到以下例子: 1.在controller中加入代码 (1)启用 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 &l ...

  8. Spring Cloud之Eureka服务注册与发现

    解决什么问题 ➟阐述微服务以及服务注册发现的部分概念 ➟阐述Eureka服务注册与发现的部分原理及细节 为什么需要服务中心 过去,每个应用都是一个CPU,一个主机上的单一系统.然而今天,随着大数据和云 ...

  9. 【Web Shell】- 技术剖析中国菜刀 - Part II

    在第一部分,简单描述了中国菜刀的基本功能.本文我将剖析中国菜刀的平台多功能性.传输机制.交互模式和检测.我希望通过我的讲解,您能够根据您的环境检测出并清除它. 平台 那么中国菜刀可以在哪些平台上运行? ...

  10. 微信小程序 功能函数 获取验证码*

    yanZhengInput: function (e) { var that = this; var yanzheng = e.detail.value; var huozheng = this.da ...