echarts地图扩展___自定义的svg图
echarts的自定义地图
标签引入js文件
<script type="text/javascript" src="echarts/require.js"></script>
<script type="text/javascript" src="echarts/echarts.js"></script>
html部分：
<div id="test">
<div id="main" style="height:500px;border:1px solid #e4393c"></div>
</div>
js部分：
require.config({
paths : {
echarts : 'echarts/echarts',
'ehcarts/chart/map' : 'chart/map'
}
});//加载echarts.js和map.js
require(
[
'echarts',
'echarts/chart/map'
],
function(ec){
require('echarts/util/mapData/params').params.ship = {
getGeoJson : function(callback){
$.ajax({
url"echarts/echarts/oneFloor.svg",//svg地图
dataType : "xml",
success : function(xml){
callback(xml);
}
});
}
}
var myChart = ec.init(document.getElementById('main'));
var option = {
title : {
text : '测试'
},
tooltip : {
trigger : 'item',
formatter : '{b}'
},
series : [
{
name: '嘿嘿',
type: 'map',
mapType: 'ship',
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: [],
geoCoord: {
'叮叮': [0, 0],
'小兑儿': [100, 45]
},
markPoint : {
symbol : 'image://img/logo-blue.png',
symbolSize : 10,
effect : {
show : true
},
data : [
{name: '叮叮'},
{name: '小兑儿'}
]
},
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
symbol: ['none'],
itemStyle : {
normal: {
borderWidth:1,
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'erik'},
{name:'胡瑶'}
],
[
{name:'祖明'},
{name:'叮叮'}
],
[
{name:'祖明'},
{name:'小兑儿'}
]
]
}
},
{
name : '信达泰',
type : 'map',
mapType : 'ship',
roam : true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: [],
geoCoord: {
'孙经理': [100, 245],
'小姜同学': [100, 345]
},
markPoint : {
symbolSize : 10,
symbol : 'image://img/icon.png',
data : [
{name : '孙经理'},
{name : '小姜同学'},
]
}
},
{
name: '高经',
type: 'map',
mapType: 'ship',
roam:true,
symbol: ['none'],
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: [],
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
itemStyle : {
normal: {
borderWidth:1,
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'高经'},
{name:'洗手间', geoCoord:[440, 179]}
],
[
{name:'高经'},
{name:'洗手间', geoCoord:[637, 53]}
],
[
{name:'高经'},
{name:'洗手间', geoCoord:[637, 179]}
],
[
{name:'高经'},
{name:'洗手间', geoCoord:[307, 179]}
]
]
}
}
]
};
myChart.setOption(option);
}
)
完整部分：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="echarts/jquery.min.js"></script>
<script type="text/javascript" src="echarts/require.js"></script>
<script type="text/javascript" src="echarts/echarts.js"></script>
<style type="text/css">
#test{
/*background:url("img/login.jpg");*/
}
</style>
</head>
<body>
<div id="test">
<div id="main" style="height:500px;border:1px solid #e4393c"></div> </div>
<script type="text/javascript">
require.config({
paths : {
echarts : 'echarts/echarts',
'ehcarts/chart/map' : 'chart/map'
}
});
require(
[
'echarts',
'echarts/chart/map'
],
function(ec){
require('echarts/util/mapData/params').params.ship = {
getGeoJson : function(callback){
$.ajax({
url : "echarts/echarts/bg-test.svg",
dataType : "xml",
success : function(xml){
callback(xml);
}
});
}
}
var myChart = ec.init(document.getElementById('main'));
var option = {
title : {
text : '测试'
},
tooltip : {
trigger : 'item',
formatter : '{b}'
},
series : [
{
name: '嘿嘿',
type: 'map',
mapType: 'ship',
roam:true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: [],
geoCoord: {
'叮叮': [0, 0],
'小兑儿': [100, 45],
'胡瑶': [195, 29],
'祖明': [195, 44],
'林峰': [195, 60],
'安晨': [210, 44],
'功': [210, 60],
'立新': [144, 59],
'诗才': [195, 71],
'黄競': [210, 59],
'浪宇': [150, 55],
'晓青': [210, 71],
'毅楠': [222, 59],
'朝霞': [222, 71],
'武琦': [231, 71],
'严萍': [231, 46],
'绍波': [231, 59],
'开放': [488, 43],
'兵兵': [488, 60],
'孟珂': [522, 43],
'辉耀': [522, 60],
'佳璐': [488, 23],
'新乐': [522, 23],
'大佛': [165, 29],
'周玉': [165, 44],
'令君': [165, 60],
'佳璐': [165, 71],
'erik': [222, 44],
'爽哥': [240, 60],
'雷哥': [240, 44],
'坤哥': [176, 59],
'刚哥': [176, 71],
'高经': [545, 54],
'邱华': [468, 23],
'饥渴难耐的辉辉': [473, 40],
'大发': [500, 40],
'淼童': [473, 60],
'亚江': [500, 60],
'莉姐': [530, 70],
'红启': [570, 54],
'五福降中天': [373, 173],
'csfe': [500, 54],
'得胜令': [253, 179],
'西湖春': [496, 179],
'望江南': [72, 203],
'庆千秋': [86, 203],
'过江龙': [289, 32],
'天下乐': [289, 50],
'万年欢': [687, 24],
'浣溪沙': [637, 203],
'清平乐': [649, 203],
'四和春': [663, 203],
'杏花天': [676, 203]
},
markPoint : {
symbol : 'image://img/logo-blue.png',
symbolSize : 10,
effect : {
show : true
},
data : [
{name: '叮叮'},
{name: '小兑儿'},
{name: '胡瑶'},
{name: '高经'},
{name: 'erik'},
{name: '祖明'},
{name: '林峰'},
{name: '坤哥'},
{name: '刚哥'},
{name: '爽哥'},
{name: '雷哥'},
{name: '邱华'},
{name: '淼童'},
{name: '亚江'},
{name: '莉姐'},
{name: '大发'},
{name: '饥渴难耐的辉辉'},
{name: '红启'},
{name: '安晨'},
{name: '功'},
{name: '立新'},
{name: '诗才'},
{name: '黄競'},
{name: '晓青'},
{name: '毅楠'},
{name: '浪宇'},
{name: '朝霞'},
{name: '严萍'},
{name: '武琦'},
{name: '绍波'},
{name: '开放'},
{name: '兵兵'},
{name: '孟珂'},
{name: '辉耀'},
{name: '佳璐'},
{name: '新乐'},
{name: '周玉'},
{name: '令君'},
{name: '佳璐'}
]
},
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
symbol: ['none'],
itemStyle : {
normal: {
borderWidth:1,
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'erik'},
{name:'胡瑶'}
],
[
{name:'祖明'},
{name:'叮叮'}
],
[
{name:'祖明'},
{name:'小兑儿'}
]
]
}
},
{
name : '信达泰',
type : 'map',
mapType : 'ship',
roam : true,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: [],
geoCoord: {
'孙经理': [100, 245],
'小姜同学': [100, 345]
},
markPoint : {
symbolSize : 10,
symbol : 'image://img/icon.png',
data : [
{name : '孙经理'},
{name : '小姜同学'}, ]
}
},
{
name: '高经',
type: 'map',
mapType: 'ship',
roam:true,
symbol: ['none'],
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: [],
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 20,
color: '#fff',
shadowBlur: 5
},
itemStyle : {
normal: {
borderWidth:1,
lineStyle: {
type: 'solid'
}
}
},
data : [
[
{name:'高经'},
{name:'洗手间', geoCoord:[440, 179]}
],
[
{name:'高经'},
{name:'洗手间', geoCoord:[637, 53]}
],
[
{name:'高经'},
{name:'洗手间', geoCoord:[637, 179]}
],
[
{name:'高经'},
{name:'洗手间', geoCoord:[307, 179]}
]
]
}
}
]
};
myChart.setOption(option);
}
)
</script>
<script type="text/javascript">
$("#sel select").change(function(){
selectChange($(this).val());
}) </script>
</body>
</html>
效果如下：
需要注意的点：
echarts地图扩展___自定义的svg图的更多相关文章
- echarts地图扩展文件使用geoJson格式。
echarts地图扩展文件使用geoJson格式. 1.在线生成 http://ecomfe.github.io/echarts-map-tool/ 这里可以生成省市区的json,但是最多生成到”区 ...
- 百度echarts地图扩展动态加载geoCoord
var data={}; for(var i=0;i<result.length;i++){ data[(""+result[i].name+"")]=e ...
- Echarts 地图（map）插件之 鼠标HOVER和tooltip自定义数据
在项目开发中,有需要用到地图的地方,百度的echarts地图插件就是个不错的选择, 这里总结一下地图自定义鼠标HOVER时的事件和自定义tooltip数据: 一.鼠标HOVER时的事件: 参照官方文档 ...
- Echarts 地图上显示数值
Echarts 地图上展示数值,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiangsu', ...
- 本周学习总结(原生+Echarts地图)
本周主要想完成工作中大屏地图相关的知识,所以学习的时间不是很长 dsa.js(数据结构) 拖了两个星期还没看,等啥时候继续研究算法和数据结构再看源码 GoJS 有时间要好好研究下 https://gi ...
- EChart系列：在echart3中使用百度地图扩展之后，如何获取到百度地图对象
最近做项目想要在百度地图上叠加显示echart的散点图,然后根据地图的缩放等级和区域范围要显示不同的散点图,这中间折腾了好久.功能要求包括: (1)底图使用百度地图: (2)可以在地图上叠加显示ech ...
- 多个SVG图形集成到一个SVG图形上
SVG:使用XML格式定义图像的可缩放矢量图形(Scalable Vector Graphics). 优点就不多说了,下面看看怎么将多个svg图形集成到一个svg图形上. 如果使用bootstrap框 ...
- C#Winform使用扩展方法自定义富文本框(RichTextBox)字体颜色
在利用C#开发Winform应用程序的时候,我们有可能使用RichTextBox来实现实时显示应用程序日志的功能,日志又分为:一般消息,警告提示 和错误等类别.为了更好地区分不同类型的日志,我们需要使 ...
- WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现
原文:WPF技术触屏上的应用系列(二): 嵌入百度地图.API调用及结合本地数据库在地图上进行自定义标点的实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系 ...
随机推荐
- Unity控件ScrollView使用问题记录
Unity版本:5.6.2 控件Scroll View由4部分组成,如图: 1.含有Scroll Rect组件的根节点:Scroll View 2.含有Mask组件的节点:Viewport 3.所有内 ...
- 微信小程序公共组件的引用与控制
思路: 1.在组件wxml文件里实现布局.数据绑定.事件绑定: 2.组件js文件里定义事件,并将文件所有内容作为一个对象export出去:3.在引用的文件引入组件(方式有两种,一个是用include引 ...
- 谷歌地图api 开发 （转载）
https://www.cnblogs.com/520lin/p/5800024.html
- Beta阶段团队项目开发篇章2
例会时间: 2016.12.4 例会照片 个人工作 上阶段任务验收: 组员任务都已完成. 任务分配 组员 任务内容 韩慧敏 对调查问卷的结果进行分析和总结,确定Beta阶段各任务的优先级,撰写相关博客 ...
- Internet History, Technology and Security (Week 5-1)
Week 5 Technology: Internets and Packets Welcome to Week 5! This week, we'll be covering internets a ...
- mysql 时间格式化参数表笔记
DATE_FORMAT() 函数用于以不同的格式显示日期/时间数据. 语法: DATE_FORMAT(date,format) 实例: DATE_FORMAT(NOW(),'%b %d %Y %h:% ...
- SQLSERVER 使用XP开头的系统默认存储过程
1. 根据官网上面的内容进行执行命令 EXEC xp_cmdshell 'dir *.exe'; 但是会报错 消息 ,级别 ,状态 ,过程 xp_cmdshell,行 [批起始行 ] SQL Serv ...
- mysql中enum类型
ENUM类型 ENUM 是一个字符串对象,其值通常选自一个允许值列表中,该列表在表创建时的列规格说明中被明确地列举. 在下列某些情况下,值也可以是空串("") 或 NULL: 如果 ...
- js遍历数组和遍历对象
可以用for in来遍历对象,具体内容如下: <script type="text/javascript"> var objs = { ...
- 基于c的简易计算器一
#include <stdio.h> #include <stdlib.h> #include <string.h> #include <malloc.h&g ...