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操作系 ...
随机推荐
- Spring笔记③--spring的命名空间
p:命名空间: xmlns:p="http://www.springframework.org/schema/p" 作用:简化在xml配置bean的属性 在<bean> ...
- C++自学及C的补缺
我这个寒假可以坐在电脑前的时间算是比较少的,因为我放假不久后就去打工了,而打工的时间是很流动的,所以我无法固定时间来学习,因此我只能根据我的打工时间来安排我的学习. 由于我的书是除夕前夕淘宝的,近期是 ...
- 灵悟礼品网上专卖店——第三阶段Sprint
一.小组成员: 洪雪意(产品负责人) 陈淑筠(Master) 二.组内人员任务情况 已完成的任务: 陈淑筠:主页面的设计 洪雪意:导航条的改进和页面中插入页面的功能 正在进行的任务: 陈淑筠:主页面的 ...
- YFCC 100M数据集分析笔记
--从YFCC 100M数据集中筛选出Geo信息位于中国的数据集 1.YFCC 100M简介 YFCC 100M数据库是2014年来基于雅虎Flickr的影像数据库.该库由1亿条产生于2004年至20 ...
- [并查集] 1107. Social Clusters (30）
1107. Social Clusters (30) When register on a social network, you are always asked to specify your h ...
- 深入理解Java虚拟机&运行时数据区
其中,程序计数器.虚拟机栈.本地方法栈3个区域随线程而生,随线程而灭.
- Head First Java & final
- JS计算两个日期之间的天数，时间差计算
1.日期之间的天数计算 //计算天数差的函数,通用 function DateDiff(sDate1, sDate2) { //sDate1和sDate2是2017-9-25格式 var aDate, ...
- Alpha阶段敏捷冲刺④
1.提供当天站立式会议照片一张. 每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 昨天已完成的工作. 改善界面设计 今天计划完成的工作. 数据库和程序的连接 后端框架的继 ...
- 命令行执行python文件时提示ImportError: No module named 'xxx'
背景: 最近在写接口自动化测试框架的时候发现,框架使用pycharm ide的时候可以正常跑测试用例,但是在dos窗口输入命令执行测试的时候,import项目内部的包时报错“ModuleNotFoun ...